如何使用内联onclick属性停止事件传播？

本文翻译自：How to stop event propagation with inline onclick attribute?

Consider the following: 考虑以下：

<div onclick="alert('you clicked the header')" class="header"><span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>

How can I make it so that when the user clicks the span, it does not fire the div 's click event? 我怎样才能使它在用户单击跨度时不会触发div的click事件？

#1楼

参考：https://stackoom.com/question/1cro/如何使用内联onclick属性停止事件传播

#2楼

我遇到了同样的问题-IE中的js错误框-就我所知，这在所有浏览器中都可以正常运行（event.cancelBubble = true在IE中可以完成工作）

onClick="if(event.stopPropagation){event.stopPropagation();}event.cancelBubble=true;"

#3楼

This also works - In the link HTML use onclick with return like this : 这也有效-在链接HTML中，将onclick与return一起使用，如下所示：

<a href="mypage.html" onclick="return confirmClick();">Delete</a>

And then the comfirmClick() function should be like: 然后，comfirmClick（）函数应类似于：

function confirmClick() {if(confirm("Do you really want to delete this task?")) {return true;} else {return false;}
};

#4楼

For ASP.NET web pages (not MVC), you can use Sys.UI.DomEvent object as wrapper of native event. 对于ASP.NET网页（不是MVC），可以将Sys.UI.DomEvent对象用作本机事件的包装。

<div onclick="event.stopPropagation();" ...

or, pass event as a parameter to inner function: 或者，将事件作为参数传递给内部函数：

<div onclick="someFunction(event);" ...

and in someFunction: 并在someFunction中：

function someFunction(event){event.stopPropagation(); // here Sys.UI.DomEvent.stopPropagation() method is used// other onclick logic
}

#5楼

This worked for me 这对我有用

<script>
function cancelBubble(e) {var evt = e ? e:window.event;if (evt.stopPropagation)    evt.stopPropagation();if (evt.cancelBubble!=null) evt.cancelBubble = true;
}
</script><div onclick="alert('Click!')"><div onclick="cancelBubble(event)">Something inside the other div</div>
</div>

#6楼

<div onclick="alert('you clicked the header')" class="header"><span onclick="alert('you clicked inside the header'); event.stopPropagation()">something inside the header</span>
</div>

如何使用内联onclick属性停止事件传播？相关推荐

Java：从Java 8开始受益于内联类属性
希望在几年内,Java将具有"内联类"功能,该功能可以解决Java当前状态下的许多挑战. 阅读本文并学习如何立即使用Java 8或更高版本,并且仍将受益于即将出现的内联对象数组的一 ...
html内联元素属性,【前端】HTML__内联元素与块元素
在HTML4.0时代,HTML的元素类型分内联元素(inline element)和块元素(block-level element). 第一.内联元素内联元素是是一种基于语义级的基本元素,一般只能容 ...
display内联属性
block,inline和inline-block概念和区别总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 ...
DOM与元素节点内联样式
获取.设置及移除单个内联 CSS 属性每个 HTML 元素都有个 style 属性,可以用来插入针对该元素的内联 CSS 属性. <div style='background-color:bl ...
html 中内联样式表,html – CSS带有内联样式的伪类
不,这是不可能的.在使用CSS的文档中,内联样式属性只能包含属性声明;在样式表中的每个规则集中出现的同一组语句.从 Style Attributes spec: The value of the st ...
安卓TV插件化9.0内联崩溃原因及解决方案
安卓 TV 端应用的更新比较困难,一方面是受限于各个设备厂商的规则,应用更新策略比较慢,另一方面是 TV 用户主动更新的意愿比较低.因此插件化热更新在安卓 TV 端就成为了有效更新应用业务能力的必要技 ...
标签内联事件和event对象
event对象在IE和firefox下表现是不同的.在IE下,event是window对象的一个属性,是在全局作用域下的,而在firefox里,event对象是做为事件的参数存在的: ======== ...
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
iframe内联元素有白边原因_教你如何使用内联框架元素 IFrames 的沙箱属性提高安全性？
作者:Huup_We 转发链接:https://mp.weixin.qq.com/s/21ydrXuinCtYiJdsynsTrA 前言想要构建一个体验丰富的网站,嵌入组件和内容几乎是不可避免的,而 ...

如何使用内联onclick属性停止事件传播？

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

如何使用内联onclick属性停止事件传播？相关推荐

最新文章

热门文章