input中blur失去焦点事件与点击事件冲突时如何解决
⽅法⼀
使⽤setTimeout
$(function(){
$(".cy-name-input input").on({
focus:function() {
$(".cy-close").css('display','block');
},
blur:function() {
setTimeout(function(){
$(".cy-close").css('display','none');
},0)
}
input绑定onblur事件})
$(".cy-close").click(function(){
$(".cy-name-input input").val('');
})
})
⽅法⼆
只要给按钮设置 mousedown 事件,并在其中 event.preventDefault() 就可以了
// html
<input type="text" autofocus="autofocus">
<button>点击我⽂本输⼊框不会失去焦点</button>
// javascript
var btn = document.querySelector('button')
想要点击按钮,触发按钮的 click 事件,但⼜不想触发 input 的 blur 事件。这⾥⾯的问题就在于,当我们点击按钮的时候,⽂本框失焦,这是浏览器的默认事件。当你点击按钮的时候,会触发按钮的 mousedown 事件,mousedown 事件的默认⾏为是使除了你点击的对象之外的有焦点的对象失去焦点。所以只要在 mousedown 事件中阻⽌默认事件发⽣就可以了!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论