Question

我正在展示示例代码：

<div onmouseover="function1(e)">
   SomeContent 1
   <div onmouseover="function2(e)"> SomeContent 2</div>
</div>

当鼠标悬停在内部div上时，function1()和function2()都在执行。如果鼠标位于内部div上，则只应执行function2()。我甚至尝试过使用e.stopPropagation()。

任何帮助都表示赞赏，并提前致谢。

Answer 1

stopPropagation（）对我有用。也许你没有正确使用它？

以下代码段也适用于.on('mouseenter',..

$('div').hover(function(e) {
  if ($(e.target).is('div.parent')) {
    console.log('parent');
    e.stopPropagation();
  } else if ($(e.target).is('div.child')) {
    console.log('child');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  SomeContent 1
  <div class="child">SomeContent 2</div>
</div>

Answer 2

这对我有用。这有帮助吗？＆＃34; window.event＆＃34;是可用于onclick的对象，而不是＆＃34; window.e＆＃34;。

＆＃13;

var function1 = function(){
  console.log("func1"); 

}

var function2 = function(e){
  e.stopPropagation();
  console.log("func2"); 

}

＆＃13;

<div onmouseover="function1(event)" style="padding:30px;background:red;">
   SomeContent 1
   <div onmouseover="function2(event)" style="background:yellow"> SomeContent 2</div>
</div>

＆＃13;

Answer 3

因为您使用的是JQuery，我建议使用 on() ：

说明：将一个或多个事件的事件处理函数附加到所选元素。

而不是被认为是不良行为的内联事件处理程序，例如：

$('#content_1').on('mouseover' , function(e){
    $('#console').text('function 1');
});

$('#content_2').on('mouseover' , function(e){
    e.stopPropagation();
    $('#console').text('function2');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="content_1">
   SomeContent 1
   <div id="content_2"> SomeContent 2</div>
</div>

<br>
<span id='console'></span>

在Mouseover上为嵌套的div执行一个函数

3 个答案: