Loading

三种方法教你HTML实现点击某一个元素之外触发事件


大致编写的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之外的部分触发特定函数

大家有什么其他的方法可以实现欢迎评论内提出😄

posted @ 2019-11-25 23:33  Jacob是我了  阅读(7649)  评论(0)  编辑  收藏  举报