4

我正在开发一个在地图上显示事件的网站。当用户将鼠标悬停在事件图钉上时，会显示一个工具提示信息窗口并提供事件信息。当用户单击图钉时，它们应该被放大到更靠近事件。

我有这个功能可以在除 Firefox 之外的所有浏览器上运行。由于某种原因，每个图钉 div 的单击事件都不会触发。这特别奇怪，因为 mouseover 事件触发没有问题。我也没有看到任何错误。

$(document).on('click', 'div.pushpin', function () {
  alert('Detected a click!');
});


$(document).on('mouseover', 'div.pushpin', function () {
  // Displays tooltip
});

这是我的网站：http ://www.raveradar.com/qa

您可以比较它在 Chrome 和 Firefox 中的工作方式以查看问题。

我试图通过创建一个 jsFiddle 来隔离问题。但是点击事件在小提琴中没有问题地触发：http: //jsfiddle.net/acraswell/9TxQg/4/

在这一点上，我真的可以用第二双眼睛检查我的工作了。

编辑： 我刚刚意识到，如果您禁用“位置：固定；” “图钉图标”图像上的 CSS 属性，突然单击图标工作正常。

编辑2： 我已经设法解决了这个问题，请在下面查看我的解决方案。我将把答案奖励给任何能够解释为什么原始代码一开始就被破坏的人，因为这是真正的问题。

4

4 回答 4

3

编辑

我想我已经在你的 css 中为你缩小了范围我注意到你使用pointer-events: all;了根据 mozilla 是实验性的

警告：在 CSS 中对非 SVG 元素使用指针事件是实验性的。该功能曾经是 CSS3 UI 草案规范的一部分，但由于许多未解决的问题，已推迟到 CSS4。

https://developer.mozilla.org/en-US/docs/CSS/pointer-events

我认为这就是导致 Firefox 出现问题的原因，将它们从你的 css 和内联 css 中删除并尝试

仅当您单击数字而不是图像时，单击事件才有效尝试将单击事件绑定到图像而不是 div.pushpin

$(document).on('click', 'img.pushpin-icon', function () {
  alert('Detected a click!');
});


$(document).on('mouseover', 'div.pushpin', function () {
  // Displays tooltip
});

如果两个事件都在做同样的事情，你可以在 on

   $(document).on('click mouseover', 'img.pushpin-icon', function () {
      alert('Detected a click!');
    });
于 2013-01-06T12:05:37.010 回答
1

您是否尝试过使用特定的 click() 函数而不是 on() 函数？

$("img.pushpin-icon").click(function(){alert("clicky");});

编辑：使用“图钉图标”，而不是图钉

于 2013-01-06T11:52:49.207 回答
1

经过数小时的故障排除后，我解决了这个问题。以下是我采取的步骤：

1）如前所述，移除图片position: fixed上的属性.pushpin-icon似乎允许触发点击事件。

2) 我将.pushpin-icon'img' 标签更改为 a div，并使用 'background-image' CSS 属性来设置图标图像。

3）position: fixed;财产没了，我不得不调整.pushpin孩子们的相对位置。

现在它似乎工作得很好。我仍然不确定为什么它一开始就不起作用，这是真正的问题。我会把答案奖励给任何能弄清楚原因的人。

查看网站上的更改：http ://www.raveradar.com/qa

单击任何图钉后，控制台会记录一条消息。

于 2013-01-06T22:39:46.997 回答
-1

我观察到您的网站在 firefox 中正确加载了所有内容，但在 Chrome 中却没有。这就是你的 onClick() 在 Chrome 中没有被触发的原因。$(document).on() 将侦听器附加到将要加载但尚未加载的元素。如果您可以直接将监听器附加到pushpin而不是document，那么您的监听器将pushpin在图钉完成加载后附加到，然后您的 onClick() 将被调用。查看this other SO question及其答案，它解决了类似的问题：

jQuery Document.on()

它不能解决你的全部问题，但它确实缩小了范围：Chrome 没有加载你的元素，因此你的 onClick() 没有被触发。如果您能弄清楚 Chrome 为何会这样做，那么您的解决方法就是。同时，您可以将侦听器附加到元素的特定 ID/类

于 2013-01-06T11:53:41.217 回答