Heim > Artikel > Web-Frontend > 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?

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?

黄舟Original: 2017-06-28 11:25:441349Durchsuche

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");	
});

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()

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>

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");
}
);

oder

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery-Ereignis-Mouseover und Mouseout-Ereignisverzögerung lösen ein Problem aus, wenn Sie sich schnell bewegenNächster Artikel：jQuery-Ereignis-Mouseover und Mouseout-Ereignisverzögerung lösen ein Problem aus, wenn Sie sich schnell bewegen

In Verbindung stehende Artikel

Mehr sehen