IE点击子div,父div不获取焦点问题的解决办法（二）

最新推荐文章于 2023-03-24 15:57:32 发布

原创最新推荐文章于 2023-03-24 15:57:32 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IE

本文探讨了一种不使用var元素解决IE浏览器中点击子div时，父div不获取焦点的常见问题。通过创建一个Demo，作者发现使用section元素可以达到相同效果，并强调理解HTML5内容的重要性以及勇于尝试新方法来解决问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇博文，介绍了实现思路，使用var元素来解决问题。

但总觉得很奇怪，用短语元素var去包含div流元素，这本身就是不正确的用法，所以一直在思考能否有更好的解决途径。

简单的把问题抽象出来，写了一个Demo，代码如下，很简单。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Test Button</title>
		<style>
			.select-box {
				overflow: visible;
    			/*border: none;*/
    			background: none;
    			position: relative;
    			height: 20px;
    			width: 200px;
    			border: 1px solid #111333;
			}
			.select-area {
				width: 100%;
				height: 40px;
				position: absolute;
				top: 20px;
				border: 1px solid #0000FF;
			}
			.div1, .div2, .div3, .div4 {
				width: 220px;
				height: 400px;
				border: 1px solid #99DB76;
				float: left;
				margin: 0 10px;
			}
			var {
				display: block;
				font-style: normal;
			}
		</style>
	</head>
	<body>
		<p>结论：最终选用section实现，替换原有的var元素，更贴合语义环境。</p>
		<div class="div1">
			<p>div div</p>
			<div class="select-box" tabindex="0" onclick="bclick()" onblur="bblur()">
				<div class="select-area" onclick="divclick()">
					PPPPPP
				</div>
			</div>
		</div>
		<div class="div2">
			<p>var var</p>
			<var class="select-box" tabindex="0" onclick="bclick()" onblur="bblur()">
				<var class="select-area" onclick="divclick()">
					PPPPPP
				</var>
			<var>
		</div>
		<div class="div3">
			<p>button div</p>
			<button class="select-box" onclick="bclick()" onblur="bblur()">
				<div class="select-area" onclick="divclick()">
					PPPPPP
				</div>
			</button>
		</div>
		<div class="div4">
			<p>section section</p>
			<section class="select-box" tabindex="0" onclick="bclick()" onblur="bblur()">
				<section class="select-area" onclick="divclick()">
					PPPPPP
				</section>
			<section>
		</div>

		<script>
			function bclick() {
				console.log('parent click.');
			}
			function divclick() {
				console.log('child click.');
			}
			function bblur() {
				console.log('blurbbbbbblur');
			}
		</script>
	</body>
</html>