原生js实现点击子元素的和父元素触发不同事件

最新推荐文章于 2024-04-22 15:36:45 发布
最新推荐文章于 2024-04-22 15:36:45 发布
阅读量3.4k 收藏 2
点赞数 2
分类专栏： 技术-前端 技术基础 javascropt 事件机制 文章标签： 前端 js基础 事件冒泡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013562435/article/details/84996573
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实现点击子元素的和父元素触发不同事件</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		.wrap{
			width: 500px;
			height: 500px;
			background-color: blue;
			color: #fff;
			padding-left: 20px;
		}
		p{
			margin-bottom: 50px;
		}
		.child{
			width: 300px;
			height: 300px;
			background-color: red;
			color: black;
		}
		a:link{
			color: #fff;
			text-decoration: none;
		}
		a:visited{
			color: #fff;
			text-decoration: none;
		}
		a:hover{
			color: #fff;
			text-decoration: none;
		}

	</style>
</head>
<body>
	<div class="wrap" onclick="fun1()">
		<p>点击父元素</p>
		<div class="child" onclick="fun2(event)">
			<a href="#" onclick="fun3(event)">点击子元素</a>
		</div>
	</div>
	<script type="text/javascript">
		function fun1(){
			// alert("点击父元素")
			window.location.href='http://www.baidu.com'
		}
		function fun2(e){
			e.stopPropagation()
			alert("点击子元素")
		}
		function fun3(e){
			e.preventDefault()
			e.stopPropagation()
			alert("点击a标签")
		}
	</script>
</body>
</html>

关键点：

e.preventDefault() 阻止事件冒泡

e.stopPropagation() 阻止a元素的默认跳转行为。

实例：

 

点击商品组件的时候点击按钮触发增加购物车事件，灰色按钮触发提示按键。点击除了按钮以外的区域，进入商品详情页。

 

巧克力人生
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
原生javascript实现拖动元素示例代码
10-25
首先改变被拖动元素的布局属性，接着捕捉鼠标事件，当触发mousedown时，记录下当前鼠标在元素中的相对位置，接着处理mousemove事件
点击子元素事件不触发父元素事件
05-12
点击子元素，触发子元素事件的同时不触发父元素的时间
点击子元素却也触发父元素的点击事件
热门推荐
我的博客
02-24 1万+
在前端开发时，经常出现父元素有点击事件，子元素也有点击事件，在点击子元素时却会把父元素的点击事件也触发，这种情况叫做事件冒泡，解决的方案有很多种，这里记录一下比较常用，比较好用的一种解决方案 HTML 代码   父元素 &lt;div id="father" style="width:600px;height:400px;border:1px solid black;"&gt;&lt;...
原生javascript实现获取指定元素下所有后代元素的方法
10-25
主要介绍了原生javascript实现获取指定元素下所有后代元素的方法,在进行web程序设计时是非常实用的技巧,需要的朋友可以参考下
JS阻止子元素触发父元素的事件
花铛
10-08 6667
通过事件对象获取到event.target，然后对event.target的特征进行判断(比如class)。 不适用于有多个子元素的情况下； 如果子元素内部又嵌套子元素的话，这个方法就失效了。 .parent{ width:200px; height:200px; background-color: aqua; } .children{ width:100p...
JS（DOM-事件机制）
qq_48108860的博客
03-12 671
事件三要素 1、事件源：触发事件的对象 ，如按钮对象 2、事件类型：如何触发？触发什么事件？如鼠标点击，键盘按下等 3、事件处理程序：函数 执行事件的步骤 1、获取事件源 2、注册事件（绑定事件） 3、采用函数赋值形式添加事件处理程序 绑定事件 1、向HTML元素中添加事件 1）onclick='alert(1)' 2）onclick='test()' function test(){ //不能写在window.onload=function(){}中，否则会找不到t...
JavaScript 事件冒泡
LiLi_code的博客
01-16 277
事件冒泡：子元素的onclick事件 触发完会传导到父元素的onclick事件去 一、用以下例子演示：其中 &lt;li&gt; 是 &lt;a&gt; 的子元素 &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt;
js基础 事件流
weixin_38039976的博客
01-20 716
js基础 事件流事件流执行顺序事件捕获处于目标事件冒泡事件范围事件代理 事件流执行顺序 js中事件流执行顺序：事件捕获 --> 处于目标 --> 事件冒泡 事件捕获 事件捕获就是从事件最模糊的节点往最准确的节点触发 处于目标 点击目标节点 事件冒泡 事件捕获就是从事件最准确的往最模糊的节点节点触发 事件范围 点击事件的事件捕获和事件冒泡的范围：不仅仅是视觉的范围，而是节点之前嵌套关系的范围。就算父节点和子节点看起来不在同一个容器里面，点击子节点也会触发父节点的事件捕获和事件冒泡 事件代理 通过父
【JavaScript-12】事件冒泡和事件委托
前端代码小白的日常博客
07-07 432
当我们点击子元素触发父元素的事件，这种现象，我们叫做事件冒泡，即由子元素向祖先元素传播，就像气泡从水底上浮event.stopPropagation();！ 二、事件委托 通俗的讲，子代有事，让父级执行，当我们点击li时，子元素会通过事件的冒泡来触发父元素的事件，主要是通过事件冒泡：不要给每个子节点单独设置事件监听器，而是事件监听设置在其父节点上，然后利用冒泡原理影响设置每个子节点...
扩展点击区域的范围
JustinNick的博客
05-15 1074
有时按钮控件的范围太小，导致操作体验很差，需要扩大点击区域范围： /** * 扩展点击区域的范围 * * @param view 需要扩展的元素，此元素必需要有父级元素 * @param expendSize 需要扩展的尺寸（以sp为单位的） */ public static void expendTouchArea(final View view, final int ...
原生JS实现列表子元素顺序反转的方法分析
10-18
主要介绍了原生JS实现列表子元素顺序反转的方法,结合实例形式分析了javascript针对dom元素、数组reverse方法、innerHTML方法等列表元素顺序翻转相关操作技巧,需要的朋友可以参考下
通过原生JS实现为元素添加事件的方法
10-21
下面小编就为大家带来一篇通过原生JS实现为元素添加事件的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
单元格里<a>标签点击事件触发同时会触发单元格(父标签)单击事件问题解决（js冒泡事件阻止_demo
井底的青蛙
09-26 939
demo演示图： 下边是具体代码： &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&gt;     &lt;/head&gt;     &lt;body&gt
HTML DOM 事件
weixin_30457065的博客
04-26 72
鼠标事件 属性 描述 DOM 事件类型 onclick 当用户点击某个对象时调用的事件句柄。 2 鼠标事件 oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发 鼠标事件 ondblclick 当用户双击某个对象时调用的事件句柄。 2 鼠标事件 onmousedown 鼠标按钮被按下。 2 ...
a链接的js点击事件和其他元素onclick事件里this的区别
hyswl666的博客
10-30 208
今天做一个点击事件的时候，使用了a链接的点击事件，通过这种形式来实现的，但是发现传this的时候和其他元素的onclick事件不一样，比如这里的，a链接的this本质还是链接，只有onclick里的才是元素本身，可以通过jquery或者js原生的各种dom操作。
html点击父元素执行子元素,js单击子元素给父元素添加单击事件onclick会形成连击...
weixin_42514711的博客
07-02 1891
网站应用需求多种多样，有的时候单击某个元素(如 删除)需要用js给其父元素添加单击事件；但直接给其父元素添加onclick事件会形成连击，即设置的父元素onclick单击事件会立即执行，不符合由用户单击后再执行的要求。为了避免形成连击，特意尝试用setTimeout延迟程序的执行，但仍然会形成连击；按理说给其父元素添加的单击事件不会立即执行，估计是子元素与父元素重合所至。一、js单击子元素给父元素...
turn.js教程及总结
qq_43402051的博客
04-10 1万+
先看一眼我制作的简单demo演示图 这部分主要用作演示及养眼 接下来我们来抛开演示图来讲一下如何使用 turn简介 一个基于jquery用来实现3d翻书效果的插件 使用所需 jquery.js、turn.js 这里面jquery全网一查都是, turn.js官网下载太慢了，嫌慢的码友们可以私信我或留言我会发给大家 基本用法 $('#book').turn({ acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为true pages: 11, /
JavaScript-父子dom同时绑定两个点击事件，一个用捕获，一个用冒泡时执行顺序
qq_34412985的博客
04-01 782
事件的执行顺序绝对是让人头疼的问题。当父元素与子元素都绑定了多个事件，且有的绑定在冒泡阶段、有的绑定在捕获阶段时，事件的触发顺序如何？如果你只关心这个问题，请直接下滑到3. 绑定多个事件，且由用户行为触发。如果你想细致了解JavaScript中的事件发生，请慢慢阅读。 1. 原生事件的发生顺序 一般来讲，当为一个a标签添加click事件以后，点击这个标签，会先执行绑定的事件、后跳转页面。一个in...
【前端】数组的常用处理函数
最新发布
lcukyNwa的博客
04-22 446
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
react如何解决点击子元素后父元素的css样式也生效
05-31
在 React 中，也可以使用事件委托来解决点击子元素后父元素的 CSS 样式也生效的问题。不同于使用原生 JavaScript，React 中需要使用 `event.currentTarget` 属性来获取当前绑定事件的元素。 例如，如果你想让点击子元素时不触发父元素的事件，可以通过以下代码实现： ```jsx class Parent extends React.Component { handleClick = (event) => { if (event.target.classList.contains('child')) { // 执行子元素的操作 } event.stopPropagation(); // 阻止事件冒泡到父元素 } render() { return ( <div className="parent" onClick={this.handleClick}> <div className="child">子元素</div> <div className="child">子元素</div> <div className="child">子元素</div> </div> ); } } ``` 在 `handleClick` 方法中，我们使用 `event.target` 来获取触发事件的元素，使用 `event.currentTarget` 来获取当前绑定事件的元素。当触发事件的元素是子元素时，执行子元素的操作，同时使用 `event.stopPropagation()` 方法阻止事件冒泡到父元素。 这样，当你点击子元素时，只会触发子元素的操作，不会触发父元素的事件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值