前言
记录两个在前端实际开发过程中的小问题(也能是机制)
一、前端回车无线触发点击事件?
1.准备
<div>
<button id="btn01">测试01</button>
<br>
<button id="btn02">测试02</button>
</div>
</body>
<script>
$().ready(function () {
$("#btn01").click(function (e) {
console.log("btn01")
})
$("#btn02").click(function (e) {
console.log("btn02")
})
$(document).keydown(function (event) {
if (event.keyCode == 13){
$("#btn02").click()
}
})
})
</script>
效果
解释:页面中有两个按钮,分别绑定了不同的点击事件,同时整个页面绑定了回车事件。
2.问题复现
- 当我们正常按回车时,会正常触发相应的回车事件
2.但是当我们,先点击一下测试01按钮后,再按下回车,会发现每次触发回车事件都会触发一次测试01按钮的点击事件
3.问题解决
- 重新更改代码
<div>
<button id="btn01">测试01</button>
<br>
<button id="btn02">测试02</button>
</div>
</body>
<script>
$().ready(function () {
$("#btn01").click(function (e) {
console.log("btn01")
})
$("#btn02").click(function (e) {
console.log("btn02")
})
$(document).keydown(function (event) {
if (event.keyCode == 13){
event.target.blur()
$("#btn02").click()
}
})
})
</script>
解释:在绑定回车事件时使用evet.target.blur()让触发的元素失去焦点,从而让焦点回到body元素上,这样每次按下回车就不会再触发测试01按钮的点击事件。
二、textarea文本域出现空格
1.准备
代码如下(示例):
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
效果
解释:可以看到代码很简单就一个textarea元素,图中效果也是正常的
2.问题复现
代码如下(示例):
<div>
<textarea name="" id="" cols="30" rows="10">
</textarea>
</div>
效果
当我们将textarea元素换行后,文本域就会多出几个空格
3.问题解决
在实际开发中可能由于textarea的属性过多,为了代码整洁需要将textarea进行换行导致的,解决也很简单,只要将textarea的在一行里闭合就可以,比如这样:
<div>
<textarea name="" id="" cols="30" rows="10"
></textarea>
</div>
总结
这两个小bug解决起来还是挺简单的,也不太常见,遇到了希望能参考一下。