三種方法教你HTML實現點選某一個元素之外觸發事件
阿新 • • 發佈：2019-11-26
大致編寫的HTML介面渲染後是這個樣子的，我們現在想要實現的需求是點選Button所在的div不會觸發事件，而在點選Button所在的div之外的區域時會觸發事件，下面就來介紹三種方法實現。
<!-- HTML程式碼 --> <html> <head> <link rel="stylesheet" href="./index.css"> </head> <body> <div class="container"> <div class="inner"> Button </div> </div> <script src="./index.js"></script> </body> </html>
/* CSS程式碼 */ .container{ width: 400px; height: 400px; display: flex; align-items: center; justify-content: center; border: 1px solid black; } .inner{ height: 100px; width: 100px; background-color: burlywood; display: flex; justify-content: center; align-items: center; cursor: pointer; }
方法一、阻止事件冒泡
先給大家畫一個示意圖理解一下冒泡和捕獲
由上面的HTML程式碼可以看到我們有一個巢狀的div，如果我們點選div的話是按什麼順序觸發這兩個事件的呢。其實是預設按照冒泡的方式觸發的，簡單來說就是由內而外，如果還是不明白請看上面的解析圖。這就導致我們點選Button所在的div也會觸發事件，所以我們要阻止冒泡就可以實現我們的需求
/** * 方法一 * 利用阻止事件冒泡實現 */ const inner = document.getElementsByClassName('inner')[0]; const container = document.getElementsByClassName('container')[0]; inner.addEventListener('click', event => { event.stopPropagation(); // chromium核心 window.event.cancelBubble = true; // IE核心 }) container.addEventListener('click', event => { console.log('success'); })
方法二、利用判斷點選事件的target是否為內部元素
/**
* 下面介紹了三種方法來判斷是否為內部元素
* 1.className是否相等，也可以使用id
* 2.DOM元素是否相等
* 3.點選的DOM是否包含內部DIV
*/
container.addEventListener('click', event => {
if('inner' !== event.target.className) {
console.log(`success`);
}
if(inner !== event.target) {
console.log('success');
}
if(event.target.contains(inner) && event.target !== inner) {
console.log('success');
}
})方法三、使用Vue .self修飾符
當前元素自身時觸發處理函式時才會觸發函式
原理：是根據event.target確定是否當前元素本身，來決定是否觸發的事件/函式
<template>
<div id="app" @click.self="container">
<img alt="Vue logo" src="./assets/logo.png" >
</div>
</template>
<script>
export default {
name: 'app',
components: {
HelloWorld
},
methods:{
container() {
console.log('success')
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
background-color: aqua;
}
</style>這樣的話也可以實現點選內部div之外的部分觸發特定函式
大家有什麼其他的方法可以實現歡迎評論內提出