如何判断我的 JavaScript 点击事件在哪里被取消

发布于 01-15 21:12 字数 1112 浏览 6 评论 0 原文

我正在开发一个 Shopify 项目,但不是原始开发人员,他不可用,并且每个页面上都包含未缩小版本的 javascript 文件。

原始网站有一个页面显示员工头像网格。我的任务是通过使其每个爆头都有一个覆盖层来显示一些附加信息,并且单击爆头图像或覆盖层(及其内容)将采取一些额外的操作。

每个网格项(头像)基本上看起来像这样:

<div class="wrap">
  <img src="PATH_TO_IMG">
  <div class="info">Danny Testeroni</div>
</div>

我的事件侦听器/处理程序看起来像这样:

const $item = document.querySelector('.wrap');
$item.addEventListener('click', (e) => {
  console.log(e.target);
});

一切都按预期工作。

单击网格项内的任意位置,console.log 会显示图像除非您单击叠加层上的任意位置,在这种情况下,console.log s 覆盖容器。这就是我所需要的。

然而,当我将其添加到实际的 Shopify 模板(其中包含此全局 JavaScript 文件)时,我得到了不同的结果。

单击网格项内的任意位置,console.log 会显示图像除非您单击叠加层上的任意位置,在这种情况下,console.log什么都没有。

我唯一可以得出的结论是,全局 JavaScript 文件中的某些内容正在取消 处的单击事件,因此它永远不会到达叠加层。是这样吗?如果是这样,有什么方法可以知道这种情况发生在哪里,并可能用我的新脚本覆盖它?如果没有,为什么点击覆盖层可能不会在实际商店中注册,而不是在我的裸机原型中注册,这可以在 这个 Codepen

I'm working on a Shopify project and am not the original developer, who is unavailable, along with an un-minified version of the javascript file included on every page.

The original site has a page displaying a grid of employee headshots. I have been tasked with enhancing by making it such that each headshot has an overlay that displays some additional info and that clicking on either the headshot image OR the overlay (and its contents) will take some additional action.

Each grid item (headshot) essentially looks like this:

<div class="wrap">
  <img src="PATH_TO_IMG">
  <div class="info">Danny Testeroni</div>
</div>

and my event listener/handler looks like this:

const $item = document.querySelector('.wrap');
$item.addEventListener('click', (e) => {
  console.log(e.target);
});

All works as expected.

Clicking anywhere within the grid item, console.logs the image UNLESS you click anywhere on the overlay, in which case, it console.logs the overlay container. This is what I need.

However when I add this to the actual Shopify template (in which this global JavaScript file gets included), i get different results.

Clicking anywhere within the grid item, console.logs the image UNLESS you click anywhere on the overlay, in which case, it console.logs NOTHING.

The only thing I can conclude is that something in the global JavaScript file is canceling the click event at the <img> so it never makes it to the overlay. Is this the case? If so, is there any way to tell where this is happening and possibly overriding it with my new script? And if not, any ideas why clicks on the overlay may not be registering in the actual Shop as opposed to my bare bones prototype, which can be seen in this Codepen?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

神也荒唐 2025-01-22 21:12:37

您可以删除 addEventListener 句柄上的箭头函数并使用它来引用它附加到的元素

const $item = document.querySelector('.wrap');
$item.addEventListener('click', function(e) {
  console.log(this);
})
<div class="wrap">
  <img src="https://cdn.shopify.com/s/files/1/0598/3089/4765/articles/barber-culture_x700.png?v=1646319227">
  <div class="info">Danny Testeroni</div>
</div>

You can remove the arrow function on your addEventListener handle and use this, to reference the element it was attached to

const $item = document.querySelector('.wrap');
$item.addEventListener('click', function(e) {
  console.log(this);
})
<div class="wrap">
  <img src="https://cdn.shopify.com/s/files/1/0598/3089/4765/articles/barber-culture_x700.png?v=1646319227">
  <div class="info">Danny Testeroni</div>
</div>

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文