現在的位置: 首頁 > web前端 > 正文

如何解決js中blur和click事件的沖突

2020年02月17日 web前端 ⁄ 共 1346字 ⁄ 字號 評論關閉

  問題:當焦點在輸入框時,點擊取消按鈕會觸發blur和click事件,導致需要點擊兩次取消按鈕才能關閉彈窗。

  原因:這是因為blur事件比click事件先觸發,而 javascript為單線程,同一時間只能執行處理一個事件 ,所以當blur處理程序時,導致其后續click事件并不會執行。

  var popover = document.getElementById('popover');

  var input = document.getElementById('category-name');

  var btn = document.getElementById('btn-cancel');

  var error = document.getElementById('error');

  解決方案1:如果click事件比blur事件先觸發就沒有問題了,所以可以給blur事件延遲觸發。

  var timer;

  input.onblur = function() {

  timer = setTimeout(function() {

  console.warn('onblur');

  error.style.display = 'block';

  }, 100);

  }

  btn.onclick = function() {

  console.warn('onclick');

  clearTimeout(timer);

  error.style.display = 'none';

  popover.style.display = 'none';

  }

  解決方案2:將click事件改為mousedown事件,讓其優先于blur事件執行(缺點是用戶體驗不好,鼠標按下便觸發了事件)。

  input.onblur = function() {

  console.warn('onblur');

  error.style.display = 'block';

  }

  btn.onmousedown = function() {

  console.warn('onmousedown');

  error.style.display = 'none';

  popover.style.display = 'none';

  }

  解決方案3:給按鈕添加一個mousedown事件,在其中執行event.preventDefault()阻止瀏覽器默認事件,這樣點擊按鈕時輸入框就不會失去焦點了。

  input.onblur = function() {

  console.warn('onblur');

  error.style.display = 'block';

  }

  btn.onmousedown = function(e) {

  console.warn('onmousedown');

  e.preventDefault();

  }

  btn.onclick = function() {

  console.warn('onclick');

  error.style.display = 'none';

  popover.style.display = 'none';

  }

  以上就是js中blur和click事件的沖突的全部知識點內容總結,大家還可以通過學步園了解更多技術知識。

抱歉!評論已關閉.

奔驰宝马破解版下载 股票涨跌无限制 山西快乐10分开奖 在线配资开户全信久联配资 今天喜乐彩开奖结果 江苏体彩七位数预测专家精选5注 吉林11选5一定牛走势 p2p理财平台网贷 炒股技巧之十大技巧 七乐彩走势图 一分钟开奖是哪个彩票 浙江11选五5开奖结果遗漏 股掌柜配资 浙江20选5最新 燕赵排列七开奖结果 pk10杀码计划在线 平特一肖50怎么赔