Question

让我先解释一下这个问题。我使用以下UL结构

<ul onmouseover="smenu_over(this)" onmouseout="smenu_out(this)" class="sub-menu" style="left:0;">
            <li><a href="#">Navigation Item with long text do text wrap</a></li>
            <li><a href="#">Sub nav item</a></li>
            <li><a href="#">Sub nav item</a></li>
            <li style="border-bottom:0;"><a href="#">Sub nav item</a></li>
          </ul>

JS功能

     function smenu_over(obj) {
  var a = obj.parentNode.childNodes[0];
  if(a!=null) {
   var top = $(".topnav_icons").length && !$(".logo_t").length ? "-45px" : "-34px"; 
   setBckPosition(a, top);
   a.style.color = "#fff";
  }
 }

我需要在此函数中应用event.stopPropagation，该函数在鼠标悬停事件发生时调用。

请帮我申请event.stopPropagation的代码？

提前致谢。

Answer 1

你的意思是：

$('ul.sub-menu a').mouseenter(function(event){
   event.stopPropagation();

   // your code....
});

Answer 2

您可以删除当前的处理程序，如下所示：

<ul class="sub-menu" style="left:0;">

然后你可以在jQuery中绑定这些函数，如下所示：

$(function() { //run when DOM is ready
  $("ul.sub-menu").hover(smenu_over, smenu_out);
});

在您的功能中，代替obj只使用this，它将引用您正在悬停的元素，如下所示：

function smenu_over() {
  var a = this.parentNode.childNodes[0];
  if(a!=null) {
    var top = $(".topnav_icons").length && !$(".logo_t").length ? "-45px" : "-34px"; 
    setBckPosition(a, top);
    a.style.color = "#fff";
  }
}

这里的重要区别是.hover()映射到mouseenter和mouseleave个事件（不是 mouseover / mouseout），在进入/离开孩子时，不在父母身上开火，所以不需要停止传播，他们已经表现得像你想要的那样。

你可以进一步优化这一点，但是如果没有看到你的其他代码，我不想给你任何不好的建议，这将解决当前的问题。

如何申请event.stopPropagation？

2 个答案: