html点击某块区域触发条件,三种方法教你HTML实现点击某一个元素之外触发事件...

HTML实现点击某一个元素之外触发事件

大致编写的HTML界面渲染后是这个样子的，我们现在想要实现的需求是点击Button所在的div不会触发事件，而在点击Button所在的div之外的区域时会触发事件，下面就来介绍三种方法实现。

Button

/* 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确定是否当前元素本身，来决定是否触发的事件/函数

export default {

name: 'app',

components: {

HelloWorld

},

methods:{

container() {

console.log('success')

}

}

}

#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;

}

这样的话也可以实现点击内部div之外的部分触发特定函数

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

分类：

技术点：

友情链接：

navicat拆迁律师素材中国By © 2017 likecs 版权所有.

粤ICP备12038626号

Powered By WordPress . Theme by Luju