Question

我有一个onmouseover的javascript事件，它链接到一个名为div1的<div>。当鼠标进入<div>时，它会向控制台写入内容。右。

如果我在第一个中包含另一个名为div2的<div>，问题是每次鼠标从第一个进入第二个时都会启动事件，而不会从div1中转出。当鼠标进入div1时，该事件应该只启动一次

代码非常简单，可以进行测试here（请打开js控制台，将鼠标放在红色和蓝色之间）

<html>
<head>
    <style>
        #div1{
            position : absolute ;
            top: 100px;
            left: 100px;
            width : 200px;
            height : 200px; 
            background : red;
        }
        #div2{
            position : absolute ;
            top: 10px;
            left: 10px;
            width : 100px;
            height : 100px; 
            background : blue;
        }
    </style>        
</head>

<body> 
    <div id="div1"  >
        <div id="div2">          
        </div>
    </div>
</body>

<script>
    var div1 = document.getElementById('div1');
    div1.onmouseover = function(){
    console.log('Function launched!');
    };
</script>

</html>

在我的网站中，它会在每个事件中发送一个AJAX请求......因此它涉及许多数据传输。

Answer 1

使用next（），previous（）方法或使用nth-child或nth-of-type。谢谢，祝你好运

Answer 2

试试这个。

<script>
  var div1 = document.getElementById('div1');
  var div2 = document.getElementById('div2');
  flag = 0;
  div1.onmouseover = function(event){
      if (event.target === this && flag == 0)
      {
          console.log('ok');
      }
  };
  div1.onmouseout = function(event){
      if (event.target === this)
      {
          flag = 0;
      }
  };

  div2.onmouseover = function(event){
      if (event.target === this)
      {
          flag = 1;
      }
  };

</script>

以上代码不允许侦听内部div的mouse over事件。

Answer 3

尝试使用stopPropagation（）停止事件传播。

function myEventHandler(e)
 {
if (!e)
  e = window.event;

//IE9 & Other Browsers
if (e.stopPropagation) {
  e.stopPropagation();
}
//IE8 and Lower
else {
  e.cancelBubble = true;
}
}

event onmouseover：当<div>包含<div> </div> </div>时，函数会多次启动

3 个答案: