按回车之所以会再次创建是因为，你点击按钮的时候把焦点也弄到按钮上了，如果只是希望不安回车。那么用blur()事件，把焦点失去就可以了，或者focus()到另一个按钮上。
如果你只是想要执行一次，那么你可以加一个公共变量当做锁。当这个变量为ture的时候，函数可以执行，函数执行一次的时候，设置这个变量为false。这样第二次就不执行了。
var mylock= ture;function myclickfun(){
if(mylock==ture){
mylock = false;
//这里写你需要的创建div的代码
}
}
<br>是在html页面中的换行标志，而使用innerText属性取得内容时是不会取得html代码的，因此这里会直接返回
第1行
第2行
第3行
这样的值，由于这些值是写在三行中的，因此中间会使用\r\n来换行。
这里\r和\n都表示换行，功能是一样的，但在不同的 *** 作系统中使用上会有区别。
\r\n是在windows系统中的使用方式
\n是linux或unix中的方式
\r是苹果系统中的方式
基于element-ui
组件
开发的vuejs项目，
实现回车键发起搜索，和原生的input
标签使用方法不一样：
el-input
监听键盘按下状态
得用@keyupenternative,如果是非el-input
组件，可以直接用@keyupenter
<el-input
placeholder="搜索"
icon="search"
v-model="input"
:on-icon-click="pchandleIconClick"
@keyupenternative="searchEnterFun">
</el-input>
<input
placeholder="搜索"
type="text"
@keyupenter="searchEnterFun">
在methods方法集里，写上监听的方法，当获取的keyCode
为13时，表示按下了回车键，如果需要监听空格或者其他键，换成别的键值
searchEnterFun:function(e){
var
keyCode
=
windowevent
ekeyCode:ewhich;
//
consolelog('回车搜索',keyCode,e);
if(keyCode
==
13
&&
thisinput){
this$routerpush({path:'/Sharekeywords='+thisinput});
}
}
which
和
keyCode
属性提供了解决浏览器的兼容性的方法。
keyCode属性返回onkeypress事件触发的键的值的字符代码，或者
onkeydown
或
onkeyup
事件的键的代码
注意：
在
Firefox
中，keyCode
属性在
onkeypress
事件中是无效的
(返回
0)。浏览器兼容问题，可以一起使用
which
和
keyCode
属性来解决：
var
keyCode
=
windowevent
ekeyCode:ewhich;
which
属性返回onkeypress事件触发的键的值的字符代码，或者
onkeydown
或
onkeyup
事件的键的代码
浏览器支持：谷歌、火狐、ie9、safari、欧朋
以上这篇vuejs项目
el-input
组件
监听回车键实现搜索功能示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:详解vue文件中监听input输入事件（oninput）vue使用element-ui的el-input监听不了回车事件的解决方法vue点击inputd出带搜索键盘并监听该元素的方法
在你的body里面订购事件 onKeyDown = 处理函数，然后在处理函数中判断
eventkeyCode如果是 13 ，那么按下的是enter，调用你button的onclick的事件处理函数，否则就什么也不做。
我写了个简单的例子：
<html>
<head>
<title>key</title>
<body onKeyDown = "_b()">
<input type = "button" onclick = "_a()" value = "click"/>
<script>
function _a()
{
alert("按钮被点击");
}
function _b()
{
if(eventkeyCode ==13)
_a();
}
</script>
</body>
</html>
以上就是关于如何解决js中点击了按钮一次，再按回车也会触发按钮的事件的bug全部的内容，包括:如何解决js中点击了按钮一次，再按回车也会触发按钮的事件的bug、js 标签 回车换行、vue.js项目 el-input 组件 监听回车键实现搜索功能示例等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）