jquery – 焦点输出事件后未触发的Click事件

前端之家收集整理的这篇文章主要介绍了jquery – 焦点输出事件后未触发的Click事件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在Focusout事件之后,不会触发click事件.

我的设计是,

  1. <textarea id="txt"></textarea>
  2. <input type="button" id="btnClick" value="Submit" />

jQuery的,

  1. $(document).ready(function () {
  2. var field = $("#txt");
  3. var btn = $("#btnClick");
  4. field.on("focusin",f1);
  5. field.on("focusout",f2);
  6. btn.on("click",f3);
  7.  
  8. function f1() {
  9. field.removeClass("c1").addClass("c2");
  10. }
  11.  
  12. function f2() {
  13. field.removeClass("c2").addClass("c1");
  14. }
  15.  
  16. function f3() {
  17. alert('hi');
  18. }
  19. });

样式,

  1. .c1 { height:40px; }
  2. .c2 { height:250px;}

而且我还附上了Fiddle here.

解决方法

那是因为它没有足够的时间让按钮移动位置触发点击.如果您按住mousedown并将鼠标移动到按钮并点击该按钮,您可以看到点击有效,您将看到点击工作.

要么使用btn.on(‘mousedown’,f3);或定位按钮,使焦点不会移动

DEMO mousedown

DEMO button positioned

点击工作的方式是你在元素和鼠标上都有mousedown,也就是当它触发点击时

猜你在找的jQuery相关文章