使用@tap.stop阻止事件继续传播

目录
  • @tap.stop阻止事件继续传播
  • uniapp+uview @tap.stop="stop"组织冒泡失效bug

@tap.stop阻止事件继续传播

在uni-app开发当中，难免会遇到外层view嵌套内层view，又同时都含有点击事件，这样就会起冲突。为了防止事件的继续传播我们就会用到事件修饰符.stop ，先看代码

<template>
    <view class="wai" @tap="waiTab">
        <h5>外面</h5>
        <view class="nei" @tap="neiTab">
            <h5>内部</h5>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            waiTab(){
                console.log("点击了外边")
            },
            neiTab(){
                console.log("点击了内部")
            }
        }
    }
</script>
<style>
    .wai{
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        background-color: #0000FF;
    }
    .nei{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        background-color: #00CE47;
    }
</style>

效果是这样的：

当我们点击外部时：

当我们点击内部时：

解决方法：只需在@tap后面加.stop就可以阻止事件继续传播

<view class="wai" @tap.stop="waiTab">
		<h5>外面</h5>
		<view class="nei" @tap.stop="neiTab">
			<h5>内部</h5>
		</view>
	</view>

uniapp+uview @tap.stop="stop"组织冒泡失效bug

阻止事件冒泡时，直接在需要使用的方法上加.stop无效

需要在外层加一层标签 <view @tap.stop=“stop”>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue自定义tap指令及tap事件的实现

    1.Vue指令 Vue提供自定义实现指令的功能, 和组件类似,可以是全局指令和局部指令,详细可以参见vue官网自定义指令一节(https://cn.vuejs.org/v2/guide/custom-directive.html). 2.v-tap指令实现 我个人的理解,编写指令即是在vue指令对象提供的钩子函数中做相应的逻辑处理,tap指令是在bind钩子函数中做相应的处理, 首先,要明白的是tap是为了处理click事件在iphone上的存在300ms的延时,这样使得连续点击很不流畅,tap

  • vue click.stop阻止点击事件继续传播的方法

    如下所示: <div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", data: { name: "Vue.j

  • vue.js中修饰符.stop的用法解析

    vue.js中修饰符.stop的用法解析

    目录 修饰符.stop的用法 用法如下 下面是全部的代码 stop事件修饰符 stop事件修饰符具体介绍 修饰符.stop的用法 .stop修饰符是用来阻止冒泡事件的发生的. 用法如下 <a v-on:click.stop="doThis"></a> 下面是全部的代码 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF

  • 使用@tap.stop阻止事件继续传播

    使用@tap.stop阻止事件继续传播

    目录 @tap.stop阻止事件继续传播 uniapp+uview @tap.stop="stop"组织冒泡失效bug @tap.stop阻止事件继续传播 在uni-app开发当中,难免会遇到外层view嵌套内层view,又同时都含有点击事件,这样就会起冲突.为了防止事件的继续传播我们就会用到事件修饰符.stop ,先看代码 <template>     <view class="wai" @tap="waiTab">  

  • JS传播事件、取消事件默认行为、阻止事件传播详解

    1.事件处理程序的返回值  通常情况下,返回值false就是告诉浏览器不要执行这个事件相关的默认操作.例如,表单提交按钮的onclick事件处理程序能通过返回false阻止浏览器提交表单,再如a标签的onclick事件处理程序通过返回false阻止跳转href页面.类似地,如果用户输入不合适的字符,输入域上的onkeypress事件处理程序能通过返回false来过滤键盘输入.        事件处理程序的返回值只对通过属性注册的处理程序才有意义. 2.调用顺序 文档元素或其他对象可以为指定事件类

  • 阻止事件(取消浏览器对事件的默认行为并阻止其传播)

    取消浏览器对事件的默认行为(响应)(比如<a>标签的跳转等)并停止事件的继续传播. 实现代码 复制代码 代码如下: function stopEvent (evt) { var evt = evt || window.event; if (evt.preventDefault) { evt.preventDefault(); evt.stopPropagation(); } else { evt.returnValue = false; evt.cancelBubble = true; } }

  • JavaScript阻止事件冒泡示例分享

    之前遇到事件冒泡的问题,也去网上搜索了一番,结果大部分都是一样的代码,贴来用时也不太顺利.涉及到FF时,可以用 e.stopPropagation(); ,不知怎地我没用成功.不过我发现FF支持e.cancelBubble = true;的写法,经测试可行.就把代码贴在这里吧,省得以后到处找.IE以前版本的兼容性还没测试,用到时再完善吧. 复制代码 代码如下: //取消事件冒泡 function stopBubble(e) {     var evt = (e) ? e : window.eve

  • 事件冒泡是什么如何用jquery阻止事件冒泡

    (1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢?因为事件源本身并没有处理事件的能力.例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处理这个事件(废话),事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件). 当事件在

  • Jquery阻止事件冒泡 event.stopPropagation

    描述: 防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数. version added: 1.0event.stopPropagation() 我们可以用 event.isPropagationStopped() 来确定这个方法是否(在那个事件对象上)调用过了. 这个方法对 trigger() 来自定义的事件同样有效. 注意,这不会阻止同一个元素上的其它事件处理函数的运行. Additional Notes: 自从.live()方法处理事件一旦传播到文档的顶部,live事件是

  • javascript事件的传播基础实例讲解(35)

    本文实例为大家分享了js事件的传播,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 300px; height: 300px; background-color: deepskyblue; } #box2{ width: 200px; h

  • return false,对阻止事件默认动作的一些测试代码

    首先页面上有一个 <textarea id="test"></textarea> 我们为其绑定以下事件 复制代码 代码如下: test.onkeydown = function(){ return false; } test.onkeyup = function(){ return false; } test.onkeypress = function(){ return false; } 我们分别注释掉其中的两个事件,每次测试仅绑定一个事件. 很明显我们每个函

  • js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高.把这个属性设置为 fasle, //可以取消发生事件的源元素的默认动作. //window.event?e.returnValue = false:e.preventDefault(); window.ev

随机推荐