事件气泡经典示例

Posted 2021-02-26

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件气泡经典示例相关的知识，希望对你有一定的参考价值。

<html onclick="revealEvent('html',event)">
<head>
	<title>Event Cancelling & Redirecting</title>
	<script type="text/javascript">
	<!--
	//window.onload=init;
	// display alert with event object info
	function revealEvent(elem,evt) {
		evt = (evt) ? evt : ((window.event) ? window.event : "")
		if (evt) {var elemx = (evt.target) ? evt.target : evt.srcElement;}
		var elemv = (evt.currentTarget) ? evt.currentTarget.nodeName : document.activeElement.tagName;
		var msg="Event (from "+elemx.tagName+" | "+elemv+" at ";
		msg += evt.clientX+","+evt.clientY+") is now at the <";
		msg += elem+"> element.";
		alert (msg);
	}
	function init(){
		document.onclick = docEvent;
		document.body.onclick = docBodEvent;
	}
	function docEvent(e) {
		revealEvent("document",e);
	}
	function docBodEvent(e) {
		revealEvent("Body",e)
	}
	function buttonEvent(form,e){
		revealEvent("button",e);
		// cancel if checked (ie4+)
		e.cancelBubble = form.bubbleCancelState.checked;
		// redirect if checked (ie5.5+)
		if (form.redirect.checked) {
			document.body.fireEvent("onclick",e);
		}
	}
	//-->
	</script>
</head>
<body onload="init()" >
	<h1>Event Cancelling &amp; Redirecting</h1>
	<hr/>
	<form onclick="revealEvent('form',event)">
		<p><button name="main1" onclick="buttonEvent(this.form,event)">Button 'main1'</button></p>
		<p>
		<input type="checkbox" name="bubbleCancelState" onclick="event.cancelBubble=true" />Cancel Bubbling at button<br/>
		<input type="checkbox" name="redirect" onclick="event.cancelBubble=true" />Redirect Event to body
		</p> 
	</form>
</body>
</html>

以上是关于事件气泡经典示例的主要内容，如果未能解决你的问题，请参考以下文章

高德 ios 自定义气泡添加点击事件无效问题