web页面 button 按钮获取到焦点后，可以触发键盘事件

最新推荐文章于 2024-06-27 15:22:14 发布

Marchanges

最新推荐文章于 2024-06-27 15:22:14 发布

阅读量1.3k

点赞数

分类专栏： javascript 文章标签：火狐 javascript

本文链接：https://blog.csdn.net/u014452812/article/details/106071261

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button id="btn">btn</button>
	<input type="text">
	<script>
		var oBtn = document.getElementById('btn');
		console.log(oBtn);

		oBtn.onclick = function (event) {
			console.log("click");
			oBtn.blur();
		}

		oBtn.onkeydown = function (event) {      

			event.preventDefault();
            event.stopPropagation();
			console.log("key down");
		}

	</script>
</body>
</html>

在button按钮获取到焦点后，按下空格键，这个时候会触发键盘事件和点击事件。

如果阻止冒泡和默认事件的话，在Chrome和IE下可以组织点击事件，但是在火狐上不能阻止点击事件。

如果想要在所有的浏览器上阻止，可以在点击后取消这个按钮的焦点。但是如果是使用 Tab 把焦点切换到button按钮上那还是没法处理。

Marchanges

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web页面 button 按钮获取到焦点后，可以触发键盘事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <button id="btn">btn</button> <input type="text"> <script> var oBtn = docu.
复制链接

扫一扫

专栏目录