資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何停用子元素觸發的mouseout事件？
在本文中，我們將學習如何使用“mouseleave”事件或原生HTML事件的stopPropagation方法來停用子元素觸發的mouseout事件。
當在子元素上觸發“mouseout”事件時，它會在其DOM層次結構中冒泡，因此它也會在其所有父元素上觸發相同的事件。當我們只想監聽父元素本身的“mouseout”事件，而不是其子元素冒泡的事件時，這可能是多餘的。
讓我們瞭解如何透過兩種不同的方法來避免上述問題
方法一
為了防止上述不需要的行為，我們可以在父元素上監聽“mouseleave”事件，因為與“mouseout”事件不同，“mouseleave”事件不會冒泡，因此它可以用於分別捕獲父元素和子元素實際觸發的正確事件。
示例
讓我們透過一個例子來了解上述方法。
檔名：index.html
<html lang="en">
<head>
<title>How to disable mouseout events triggered by child elements?</title>
</head>
<body>
<h3>How to disable mouseout events triggered by child elements?</h3>
<div id="parent" style="width: 300px; height: 300px; background-color: #ccc;">
<div id="child" style="width: 100px; height: 100px; background-color: #999;"></div>
</div>
<script>
const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
childElement.addEventListener('mouseout', () => {
console.log('mouseout on child element');
});
parentElement.addEventListener('mouseleave', () => {
console.log('mouseleave on parent element');
});
</script>
</body>
</html>
方法二
在這種方法中，我們將使用mouseout事件的stopPropagation方法來阻止其預設的冒泡行為，從而阻止子元素觸發的mouseout事件出現在父元素上。
示例1
讓我們透過一個例子來了解上述方法：
檔名：index.html
<html lang="en">
<head>
<title>How to disable mouseout events triggered by child elements?</title>
</head>
<body>
<h3>How to disable mouseout events triggered by child elements?</h3>
<div id="parent" style="width: 300px; height: 300px; background-color: #ccc;">
<div id="child" style="width: 100px; height: 100px; background-color: #999;"></div>
</div>
<script>
const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
childElement.addEventListener('mouseout', (event) => {
event.stopPropagation();
console.log('mouseout on child element');
});
parentElement.addEventListener('mouseout', () => {
console.log('mouseout on parent element');
});
</script>
</body>
</html>
示例2
在這個例子中，我們將遵循上述程式碼模式，並使用CSS pointer-events屬性停用mouseout事件
檔名：index.html
<html lang="en">
<head>
<title>How to disable mouseout events triggered by child elements?</title>
<style>
.disable-mouseout {
pointer-events: none;
}
</style>
</head>
<body>
<h3>How to disable mouseout events triggered by child elements?</h3>
<div id="parent" style="width: 300px; height: 300px; background-color: #ccc;">
<div id="child" style="width: 100px; height: 100px; background-color: #999;"></div>
</div>
<script>
const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
childElement.addEventListener('mouseover', () => {
parentElement.classList.add('disable-mouseout');
});
childElement.addEventListener('mouseout', () => {
parentElement.classList.remove('disable-mouseout');
});
parentElement.addEventListener('mouseout', () => {
console.log('mouseout on parent element');
});
</script>
</body>
</html>
示例3
在這個例子中，我們將遵循上述程式碼模式，並使用JavaScript event.preventDefault()停用mouseout事件：
檔名：index.html
<html lang="en">
<head>
<title>How to disable mouseout events triggered by child elements?</title>
</head>
<body>
<h3>How to disable mouseout events triggered by child elements?</h3>
<div id="parent" style="width: 300px; height: 300px; background-color: #ccc;">
<div id="child" style="width: 100px; height: 100px; background-color: #999;"></div>
</div>
<script>
const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
childElement.addEventListener('mouseout', (event) => {
event.preventDefault();
console.log('mouseout on child element');
});
parentElement.addEventListener('mouseout', () => {
console.log('mouseout on parent element');
});
</script>
</body>
</html>
結論
在本文中，我們學習瞭如何使用兩種方法來停用子元素觸發的mouseout事件。在第一種方法中，我們使用了mouseleave事件，因為它不會像mouseout事件那樣冒泡。在第二種方法中，我們使用了mouseout事件的stopPropragation方法來阻止mouseout事件的冒泡。
更新於：2023年8月2日
839 次瀏覽
廣告