Question

我想在父div上调用 onmouseout 事件。

虽然光标离开父div后会调用函数 outofdiv 。

但是当光标在不同的孩子div之间旅行时，功能再次被称为

请使用 javascript

建议任何方法

 <div id="maze"  onmouseout="outofdiv();">

            <div id="start" onClick="start();">S</div>
            <div class="boundary"></div>
            <div class="boundary"></div>
            <div class="boundary"></div>
            <div class="boundary"></div>
            <div class="boundary"></div>
            <div id="end" onClick="end();">E</div>
</div>


function outofdiv(){
alert("something")

Answer 1

您可以在此处找到答案：Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery

但总结一下，你必须使用另一个功能：

function onMouseOut(event) {
  //this is the original element the event handler was assigned to
  var e = event.toElement || event.relatedTarget;
  if (e.parentNode == this || e == this) {
    return;
  }
  alert('MouseOut');
  // handle mouse event here!
}

document.getElementById('maze').addEventListener('mouseout',onMouseOut,true);

从上面链接中的第一个答案中获取并修改了代码。

Answer 2

不确定，但它对您有帮助

＆＃13;

var i = 0;
$( "div.overout" )
  .mouseover(function() {
    i += 1;
    $( this ).find( "span" ).text( "mouse over x " + i );
  })
  .mouseout(function() {
    $( this ).find( "span" ).text( "mouse out " );
  });
 
var n = 0;
$( "div.enterleave" )
  .mouseenter(function() {
    n += 1;
    $( this ).find( "span" ).text( "mouse enter x " + n );
  })
  .mouseleave(function() {
    $( this ).find( "span" ).text( "mouse leave" );
  });

＆＃13;

  div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #d6edfc;
    float: left;
  }
  div.in {
    width: 60%;
    height: 60%;
    background-color: #fc0;
    margin: 10px auto;
  }
  p {
    line-height: 1em;
    margin: 0;
    padding: 0;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


 
<div class="out overout">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>
 
<div class="out enterleave">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

＆＃13;

您也可以参考此链接https://api.jquery.com/mouseover/

Answer 3

只需使用以下JavaScript：

var i = 0;
function outofdiv() {
  if (!i++) {
    alert("something");
  }
}

这只会为单页加载调用一次。

Answer 4

这称为事件冒泡。 onmouseout事件由子div元素触发，并通过其DOM层次结构冒泡，在本例中为父div的{{1}}事件处理程序。

您可以使用event.target和event.currentTarget来确定某个事件是否已被冒泡。

把

onmouseout

作为if (event.target!=event.currentTarget) return;函数的第一行。如果父outofdiv不是div事件的发起人，则会阻止该功能继续。

仅为父div元素调用javascript事件一次

4 个答案: