前端js阻止事件冒泡

电玩女神 2022-04-12 09:47 286阅读 0赞

--------------------

title: 前端js阻止事件冒泡

date: 2018-4-21 20:27:24

tags: \[js\]

categories: js

keywords: 前端js阻止事件冒泡

--------------------

### 记录在项目中遇到的问题 ###

1.event.stopPropagation()方法

这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，

2.event.preventDefault()方法

这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

#### html ####

<ul class="mui-table-view">
    	<li class="mui-table-view-cell mui-media" onclick="ligo(this,1)" style="color: blue;">
    					<span>飞速洗车</span>
    					<button type="button" class="mui-btn mui-btn-primary"style="float: right;" onclick="btngo(this,5)">
    						立即预约
    					</button>
    				</li>
    				<li class="mui-table-view-cell mui-media" onclick="ligo(this,1)" style="color: blue;">
    					<span>换机油</span>
    					<button type="button" class="mui-btn mui-btn-primary"style="float: right;" onclick="btngo(this,5)">
    						立即预约
    					</button>
    				</li>
    				<li class="mui-table-view-cell mui-media" onclick="ligo(this,1)" style="color: blue;">
    					<span>来了来了</span>
    					<button type="button" class="mui-btn mui-btn-primary"style="float: right;" onclick="btngo(this,5)">
    						立即预约
    					</button>
    				</li>			
    				
    				
    </ul>

#### js ####

<script>
    	
    		function ligo(a,sum)
    		{ 
    			// 跳转服务详情界面
    			alert(a.tagName+"\t"+sum);
    		}
    		function btngo(a,sum)
    		{ 
    			// 跳转预约界面
    			event.stopPropagation();// 阻止冒泡
    			alert(a.tagName+"\t"+sum);
    		}
    		
    		
    	</script>

发表评论取消回复

表情：

评论列表（有 0 条评论，286人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS 阻止事件冒泡和默认事件

如何阻止事件冒泡，这里先拓展个知识点： DOM事件流存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。 DOM标准事件流的触发的先后顺序为：先捕获再冒泡。即

逃离我推掉我的手/ 2023年07月24日 13:29/ 0 赞/ 40 阅读

相关 JS如何阻止事件冒泡

<%@ Page Language="C" AutoEventWireup="true" CodeFile="Default5.aspx.cs"Inherits=

叁歲伎倆/ 2023年06月01日 12:52/ 0 赞/ 24 阅读

相关 JS_js阻止事件冒泡的方法

阻止方法有三种： 1、event.stopPropagation(); document.querySelector("login").addEventList

你的名字/ 2023年01月16日 14:26/ 0 赞/ 244 阅读

相关 Js 冒泡事件阻止

出于对作者的尊重和感谢，原文地址为 http://www.cnblogs.com/jams742003/archive/2009/08/29/1556187.html

Bertha 。/ 2022年09月24日 00:29/ 0 赞/ 265 阅读

相关 js jquery阻止冒泡事件

event.stopPropagation(); -- 阻止元素冒泡事件注：嵌套元素一般都存在冒泡事件，会带来某些影响例：<div id="c1" οnclick="

╰+攻爆jí腚メ/ 2022年08月20日 07:27/ 0 赞/ 212 阅读

相关 js阻止事件冒泡

function stopHandler(event){ window.event?window.event.cancelBubble=true:eve

古城微笑少年丶/ 2022年07月13日 00:48/ 0 赞/ 287 阅读

相关 js中阻止事件冒泡与阻止事件默认行为

一、冒泡事件我们都知道冒泡就像水底气泡浮到水面这一过程。冒泡事件即是事件从最底层逐个经过上面一级级事件的过程，就是冒泡事件。那么如何有效的阻止冒泡事件的发生？其实在非I

雨点打透心脏的1/2处/ 2022年05月30日 06:13/ 0 赞/ 340 阅读

相关前端js阻止事件冒泡

-------------------- title: 前端js阻止事件冒泡 date: 2018-4-21 20:27:24 tags: \[js\] categor

电玩女神/ 2022年04月12日 09:47/ 0 赞/ 287 阅读

相关 js中阻止事件冒泡

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] <html> <head

淩亂°似流年/ 2022年01月14日 06:05/ 0 赞/ 314 阅读

相关 JS阻止事件冒泡和默认事件

本文转载自掘金中我的小伙伴的一篇文章：[https://juejin.im/post/5bf7ad096fb9a049ed308353][https_juejin.im_pos

妖狐艹你老母/ 2021年11月22日 12:46/ 0 赞/ 486 阅读