как применить event.stopPropagation?

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 внутри этой функции, которая вызывается, когда происходит событие mouseover.

Пожалуйста, помогите мне код для применения event.stopPropagation?

Заранее спасибо.

Answer 1

Вы можете удалить ваши текущие обработчики как встроенные, как это:

<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 событиями ( не * 1023) *mouseover / mouseout), которые не стреляют по родителю при входе / выходе из ребенка, поэтому не нужно останавливать распространение, они уже ведут себя как хочешь.

Вероятно, вы можете оптимизировать это намного дальше, но, не видя ваш другой код, я не хочу давать вам плохих советов, хотя это исправит текущую проблему.

Answer 2

Вы имеете в виду это:

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

   // your code....
});