`

onblur和onclick冲突

 
阅读更多

 

 

文本框给定一个onblur事件,按钮给定一个onclick事件,

这样的话,当点击按钮之后,文本框失去事件触发,但是按钮的onclick事件却触发不了

 

原因如下:

onclick 相当于 在某一元素上触发了 onmousedown(即鼠标按下)后 任然在该元素  触发了onmouseup(鼠标按键弹起)才触发 onclick; 
 对于某元素A 绑定了 click事件 并同时对另外 的元素B 绑定onblur事件, 这时候,当在Amousedown后,即触发了B元素的onblur事件,该事件函数执行后的效果是 改变了DOM结构,使得鼠标已经不在在元素A之上。 这时鼠标任然没有mouseup ,在mouseup之后,以为会触发click事件,实际上却不能触发。

 


解决方法:

 

在按扭上加个onmouseover函数,里面的代码是把焦点移到按扭上,这样很合乎情理,顺便加个鼠标放到提交按扭上时按钮样式变化的特效就更完美了。

 

1
3
分享到:
评论
2 楼 hzy888 2013-01-16  
楼主,你好,你说的问题,我自己写例子测试,没有你说的效果,两个不同的元素一个绑定点击事件,一个绑定失去焦点blur事件,结果是互不影响的,
麻烦你能把你的例子,发上来看看吗,十分感谢呢!
1 楼 ahack 2013-01-09  
onblur 谢谢。

相关推荐

    onclick和onblur冲突问题的快速解决方法

    这种方法可以减少事件监听器的数量,提高性能,同时避免了 `onclick` 和 `onblur` 直接冲突的问题。 在实际应用中,开发者应根据项目需求和性能考虑选择合适的方法。使用 `setTimeout` 解决方案简单易行,但可能...

    JavaScript程序设计-JavaScript基本语法.pdf

    HTML事件句柄,如`onblur`, `onclick`, `onerror`等,是JavaScript与HTML交互的关键,它们用于定义当特定HTML事件发生时执行的函数。然而,它们不应被用作JavaScript的变量或函数名,因为这可能导致与HTML事件处理...

    react-ReactHigherOrder组件来获取像hoverfocusactiveasprops这样的事件

    - 避免使用嵌套的HOCs,因为这可能导致props的命名冲突和代码可读性降低。如果需要多个HOC,可以考虑使用`compose`函数将它们组合在一起。 - 当HOC用于注入事件处理时,确保只在必要时添加这些事件,以减少不必要的...

    input的focus方法使用

    在这个场景中,`focus` 方法在 `onblur` 事件中起作用,而在 `onchange` 事件中不起作用,这涉及到事件触发的不同机制和上下文。 首先,让我们详细了解一下这两个事件: 1. **onblur** 事件:当元素失去焦点时触发...

    js怎么覆盖原有方法实现重写

    这样提高了代码的灵活性和可维护性,同时也减少了潜在的冲突和错误。 在实际应用中,可以使用其他策略来实现方法的重写,比如使用原型链(prototype chain)或者利用ES6的类(class)和继承。对于面向对象编程,...

    可在线编辑网页文字效果代码(单击)

    表格的`onclick`事件监听器绑定了一个名为`setEdit`的函数,这个函数会在用户点击表格的任何部分时被触发。 `setEdit`函数的目的是在用户点击表格单元格时,将该单元格转换为可编辑的文本输入框。不过,在提供的...

    JavaScript使用表单元素验证表单的示例代码

    在JavaScript代码中,我们首先声明了一个对象`reg`作为命名空间,以避免变量名冲突。然后定义了`regCheck`函数,该函数会在用户点击提交按钮时执行。函数内部通过`eg.$`方法获取指定`id`的输入框的值,并检查是否...

Global site tag (gtag.js) - Google Analytics