Question

我有带有图像的p标签，我希望用户只能悬停图片标签。目前，当用户悬停图片时，会触发段落mouseenter，图片mouseenter永远不会触发。

<p>Some text.. <img src="(URL)" /></p>

我目前正在使用mouseenter。

    // Hover over a paragraph
    $("article p").mouseenter(function () {
        window.console.log("paragraph trigger");
        self.showControls(this, "p");
    });

    // Hover over an image in a paragraph
    $("article p img").mouseenter(function (e) {
        e.stopPropagation();
        window.console.log("image trigger");
        self.showControls(this, "img");
    });

如何设置它以便用户可以将鼠标悬停在段落或其中的图像上而不会相互影响？

Answer 1

在文本中添加一个范围并锁定它，以分隔事件处理程序。：

<p><span>Some text..</span> <img src="(URL)" /></p>

如果您希望img mouseenter也触发span事件，您可以在$("span").mouseenter();事件处理程序中调用img

Answer 2

我建议在运行其中的任何内容之前在mouseenter（）上放一个小延迟，然后要求鼠标保持在该区域内，比如说，在触发之前一秒钟。

因此，如果用户将鼠标悬停在图像之前的段落上，则需要将鼠标悬停一秒钟以查看该段落的任何内容。

来自here的jQuery示例...您可能希望适合您的问题。

$("#paragraph").hover(function() {
  $.data(this, "timer", setTimeout($.proxy(function() {
     $(this).click();
  }, this), 2000));
}, function() {
   clearTimeout($.data(this, "timer"));
});

看起来它在触发事件之前等待了两秒钟（在这种情况下单击）。无论哪种方式，这都是我对编码的看法;触发每个元素点击之前的延迟。

仅悬停子元素

2 个答案: