0

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

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

我目前正在使用鼠标输入。

    // 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");
    });

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

4

2 回答 2

2

向文本添加一个跨度并锁定它，以分隔事件处理程序。：

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

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

于 2013-01-17T15:54:05.860 回答
1

我建议在运行其中的任何内容之前在 mouseenter() 上稍作延迟，并要求鼠标在触发前一秒钟停留在该区域内。

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

从这里开始的 jQuery 示例......您可能希望将其用于您的问题。

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

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

于 2013-01-17T15:51:18.257 回答