前端回车无限触发点击事件与textarea文本域出现空格问题

---

前言

记录两个在前端实际开发过程中的小问题(也能是机制)

---

一、前端回车无线触发点击事件？

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.问题复现

1. 当我们正常按回车时，会正常触发相应的回车事件
   
   2.但是当我们，先点击一下测试01按钮后，再按下回车，会发现每次触发回车事件都会触发一次测试01按钮的点击事件
   

3.问题解决

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){
                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解决起来还是挺简单的，也不太常见，遇到了希望能参考一下。