Wenn die JQuery-Maus Mouseout verlässt, wird eine Transaktion verarbeitet. Wie kann verhindert werden, dass die Maus betroffen ist, wenn sie sich in untergeordneten Elementen befindet?-js-Tutorial-php.cn

Wenn die JQuery-Maus Mouseout verlässt, wird eine Transaktion verarbeitet. Wie kann verhindert werden, dass die Maus betroffen ist, wenn sie sich in untergeordneten Elementen befindet?

黄舟

Freigeben： 2017-06-28 11:25:44

Original

1393 Leute haben es durchsucht

Wenn die JQuery-Maus verlassen wird (Mouseout), wird eine Transaktion verarbeitet, aber wie kann man die Maus ausschließen, wenn sie sich auf dem untergeordneten Element befindet, ohne dass dies Auswirkungen auf das obige

<div class="a"><div class="a1" style="display:none;"></div></div>
jquery中有mouseout离开时
$(".a").hover(function(){
$(this).find(".a1").css("display","block");
});	
$(".a").mouseout(function(){
$(this).find(".a1").css("display","none");	
});

Nach dem Login kopieren

hat? Sein untergeordnetes Element ist gleichbedeutend mit dem Verlassen des aktuellen DIV. Wie kann man das vermeiden?

Sie können die jQuery-Ereignismethode „mouseleave()“ verwenden, um diesen Effekt zu erzielen.

Definition und Verwendung

Wenn der Mauszeiger ein Element verlässt, tritt das Mouseleave-Ereignis ein.

Dieses Ereignis wird am häufigsten zusammen mit dem Mouseenter-Ereignis verwendet.

Die Methode „mouseleave()“ löst das Mouseleave-Ereignis aus oder gibt eine Funktion an, die ausgeführt werden soll, wenn das Mouseleave-Ereignis auftritt.

Hinweis: Im Gegensatz zum Mouseout-Ereignis wird das Mouseleave-Ereignis nur ausgelöst, wenn der Mauszeiger das ausgewählte Element verlässt. Wenn der Mauszeiger ein untergeordnetes Element verlässt, wird auch das Mouseout-Ereignis ausgelöst. Sehen Sie sich das Beispiel unten für eine Demonstration an.

Grammatik

$(selector).mouseleave()

Nach dem Login kopieren

Beispiel

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
    x=0;
    y=0;
    $(document).ready(function(){
          $("div.out").mouseout(function(){
                $(".out span").text(x+=1);
          });
          $("div.leave").mouseleave(function(){
                $(".leave span").text(y+=1);
          });
    });
</script>
</head>
<body>
    <p>不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</p>
    <p>只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</p>
    <div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left">
        <h2 style="background-color:white;">被触发的 Mouseout 事件：<span></span></h2>
    </div>
    <div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right">
        <h2 style="background-color:white;">被触发的 Mouseleave 事件：<span></span></h2>
    </div>
</body>
</html>

Nach dem Login kopieren

Ist dies notwendig, wenn es oben nur eine Funktion gibt? Ändern Sie den Code wie folgt:

$(".a").hover(
function(){
$(this).find(".a1").css("display","block");
},
function(){
$(this).find(".a1").css("display","none");
}
);

Nach dem Login kopieren

oder

$(".a").mouseover(function(){
$(this).find(".a1").css("display","block");
});
$(".a").mouseleave(function(){
$(this).find(".a1").css("display","none");
});

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWenn die JQuery-Maus Mouseout verlässt, wird eine Transaktion verarbeitet. Wie kann verhindert werden, dass die Maus betroffen ist, wenn sie sich in untergeordneten Elementen befindet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!