事件修饰符@click.stop,@click.prevent&css样式穿透 pointer-events: none_click.stop.prevent

@click.stop

@click.prevent

@click.self

@click.prevent.self @click.self.prevent

pointer-events: none

@click.stop

阻止子节点的冒泡。
DOM事件标准定义了两种事件流，捕获事件和冒泡事件。
事件捕获的是从document到触发事件的那个节点，即自上而下得去触发事件。相反的，事件冒泡是自下而上的去触发事件。
所以@click.stop的作用是阻止子节点触发事件时通知它的祖先元素。
使用场景示例：

  <div @click="click1()" style="width:40px;height:41px">
 		<div @click.stop="click2()" style="width:20px;height:20px"></div>
	</div>
1
2
3

当我们点击最内部的那个div时，我们只执行了click2()；如果把@click.stop删去，我们在点击最内部那个div时，还会执行click1()。

*******阻止冒泡事件的第二种方法
可以自己写个阻止冒泡事件 然后在发生冒泡的元素中调用这个事件

@click="_stopPropagation($event)"

methods：{      
    _stopPropagation(ev){      
        var _this = this;      
        ev.stopPropagation();      
    },
}
1
2
3
4
5
6
7
8

@click.prevent

功能：阻止事件的默认行为。
如下例，@click.prevent阻止了链接标签默认跳转事件，而执行我们自定义的点击click()方法。

<div>
  <a type="button" href="http://www.baidu.com" target="_blank" @click.prevent="click()">点我</a >
</div>

 click(){
   alert('按钮被点击')
 }
1
2
3
4
5
6
7

@click.self

功能：只当在 event.target 是当前元素自身时触发处理函数；
即加了self的点击方法只有自己可以触发，子节点点击之后无法触发；
没加self的点击方法 子节点点击之后，也会因为冒泡而触发。

    click1(){
      alert('box1被点击')
    },
    click2(){
      alert('box2被点击')
    },
  }
  <div @click.self="click1()" ">
    <div @click.self="click2()" >
    </div>
 </div>

当我们点击最内部的div时，最外层的div的点击事件不会被触发
1
2
3
4
5
6
7
8
9
10
11
12
13

@click.prevent.self @click.self.prevent

@click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为
@click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

pointer-events: none

到某个元素，但是你无法摸的着，点击不到，点击会穿透触发到下层的元素

使用场景： 当一个div上面有遮罩时，层级不可用时，可以对最外面的元素添加pointer-events: none
注：before,after伪元素也是可以使用的

.grateful_store_box::before {
  content: "";
  position: absolute;
  top: -10rpx;
  left: 0; 
  width: 750rpx;
  height: 777rpx;
  background: url('../prize_bg_icon.png?v=1.0') no-repeat;
  background-size: 100%;
  background-position: 50% 0;
  z-index: 3;
  pointer-events: none;
}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16