`
takkymj
  • 浏览: 128292 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js onblur和onclick同时触发的问题

    博客分类:
  • js
阅读更多
Java代码
<html>  
    <head>  
        <script>  
            function func1()  
            {  
               ......  
            }  
              
            function func2()  
            {  
                func1();  
            }  
              
            function func3()  
            {  
                func1();  
            }  
        </script>  
    </head>  
    <body>  
        <input type="text" onblur="func2()"/><a href="#"><img src="aa" onclick="func2()"/></a>  
    </body>  
</html> 

<html>
    <head>
        <script>
            function func1()
            {
               ......
            }
           
            function func2()
            {
                func1();
            }
           
            function func3()
            {
                func1();
            }
        </script>
    </head>
    <body>
        <input type="text" onblur="func2()"/><a href="#"><img src="aa" onclick="func2()"/></a>
    </body>
</html>

当clcik这个image的时候,func1和func2同时触发。
问:如何才能避免clcik这个image的时候,func1和func2同时触发;
问题补充:
这里,我补充一下问题的背景:
这不是什么现实项目中的问题,只是我平时无聊之余,用我贫乏之极的js写得一个稍微能简化一点重复工作的一个tool(我很无耻的称之为url productivity tool)。所以,并没有什么复杂的逻辑与设计。唯一的要求,就是自己怎么方便怎么来。
func2和func3执行的是完全一样的操作。这样的话,我可以单用鼠标完成操作,也可以单用左手(输入完成以后,小拇指扫一下tab键就可以了)。
///////////////////////////////////////////////////////
采纳的答案
判断当前的document.activeElement即活动元素是不是文本框后面的图片。
若是,则在onblur事件中returnn false;打断当前事件。

写了一段测试代码:
<script>
function doBlur(){
//在点击img标签之后,activeElement实际上是变成了img标签外的a元素。
if(document.activeElement.id=="testLink") return false;
else alert("doBlur");
}
function doClick(){
//doSomething
alert("doClick");
}
</script>
<input type="text" onblur="doBlur()"/>
<a id="testLink" href="#"><img src="aa" onclick="doClick()"/></a>
分享到:
评论

相关推荐

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

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

    js触发事件大全

    1. **`onblur`** 和 **`onfocus`**:当元素失去或获得焦点时触发。这些事件对于表单验证和自动填充功能非常关键。 2. **`onchange`**:当表单元素的内容发生改变且元素失去焦点时触发,通常用于实时更新表单数据或...

    JavaScript触发事件列表

    下面是JavaScript触发事件列表,涵盖了常见的事件类型和应用场景: 单击事件(OnClick) 单击事件是用户单击鼠标按键时产生的事件,同时onclick指定的事件处理程序或代码将被调用执行。例如:打开页面" onclick=...

    JS鼠标键盘触发函数大全

    ### JS鼠标键盘触发函数大全知识点解析 #### 一、鼠标事件 鼠标事件是JavaScript中最常见的交互方式之一,它们主要用于响应用户的鼠标操作。 - **`onClick`**:当用户单击鼠标左键时触发。该事件通常用于处理点击...

    javascript 触发事件列表

    ### JavaScript 触发事件列表详解 #### 一、单击事件(onclick) 当用户单击鼠标按键时触发的事件。通常,在HTML元素上定义`onclick`属性,该属性指定一个事件处理程序或一段代码,当点击事件发生时,这段代码将会被...

    [js]javascript事件集合(包有触发事件).pdf

    以下是一些常见的JavaScript事件以及它们的触发方式和应用场景。 #### 1. onclick事件 `onclick`事件是最常见的事件之一,当用户点击一个元素时触发。例如: ```javascript 点击我" onclick="window.open('xxxx....

    鼠标触发的事件,JS脚本

    鼠标触发的事件,JS脚本 鼠标事件是指在 Web 浏览器中,用户通过鼠标交互引发的事件。这些事件可以被 JavaScript 捕获和处理,以实现各种交互效果。下面是常见的鼠标事件: 1. onClick:鼠标点击事件,多用在某个...

    [js]javascript事件集合(包有触发事件)终版.pdf

    5. 失去焦点事件(onblur):与onfocus相对,当元素失去焦点时触发。 6. 载入文件事件(onload):页面加载完成时触发,常用于初始化操作,如检查cookie值:`('正在加载页面,请等待...')"&gt;`。 7. 卸载文件事件...

    [js]javascript事件集合(包有触发事件)[参考].pdf

    JavaScript事件是JavaScript编程中的核心...了解这些事件和如何使用它们是创建交互式网页的关键,同时也是软件开发中JavaScript技能的重要组成部分。通过熟练掌握这些事件,开发者能够创建更丰富、更动态的用户体验。

    html的DOM中Event对象onblur事件用法实例

    在JavaScript中,`onblur`事件还可以与其他DOM事件(如`onclick`、`onfocus`等)结合使用,以实现更复杂的交互逻辑。例如,当一个元素获得焦点后,可以使用`onfocus`事件来改变其样式,而当它失去焦点时,通过`...

    javascript\JS使用大全收藏

    JavaScript(简称JS)是一种轻量级的解释性编程语言,广泛用于网页和网络应用开发。在这个JS使用大全收藏中,涵盖了超过230个常用功能,包括各种交互效果、事件处理、DOM操作以及样式控制等。下面将对部分关键知识点...

    javascript的事件大全

    - onBlur:元素失去焦点时触发,可用于隐藏或清理与该元素相关的UI元素。 - onChange:元素内容改变且失去焦点时触发,常用于验证输入或更新UI。 - onFocus:元素获取焦点时触发,可用于高亮或显示相关提示。 - ...

    js鼠标事件大全js鼠标事件大全

    JavaScript(简称JS)鼠标事件是网页交互中常用的一类事件,它们允许开发者在用户与页面上的元素进行鼠标操作时执行特定的功能。以下是一些主要的JS鼠标事件及其详细解释: 1. onClick:当用户单击鼠标按钮并在同一...

    javascript事件列表解说

    - `onclick`:在鼠标单击元素时触发。 - `ondblclick`:当鼠标双击元素时触发。 - `onmousedown`:在鼠标按钮被按下时触发。 - `onmouseup`:当鼠标按钮被释放时触发。 - `onmouseover`:当鼠标指针进入元素...

    javascript表单事件汇总

    在深入探讨《javascript表单事件汇总》这一主题之前,我们首先需要理解JavaScript作为一种广泛应用于网页开发的脚本语言,如何...掌握这些事件的触发机制和应用场合,是成为一名高效JavaScript开发者的关键技能之一。

    javaScript事件课堂笔记+作业.pdf

    在早期的JavaScript中,事件处理通常通过在HTML元素中添加`onxxx`属性来完成,如`onclick="js代码"`。现在更推荐使用DOM(文档对象模型)级别的事件处理,例如使用`addEventListener`和`removeEventListener`方法来...

    js页面事件大全,js页面事件大全

    本文将详细介绍一系列常见的JS页面事件,帮助开发者更好地理解和运用这些事件。 #### 二、鼠标事件 1. **`onClick`**: 当用户单击某个元素时触发。 2. **`onDblClick`**: 当用户双击某个元素时触发。 3. **`...

    js方法和函数.doc

    JavaScript是Web开发中不可或缺的一部分,尤其对于前端交互和动态网页来说更是如此。本文将深入探讨JavaScript中的方法和函数,以及与之相关的事件处理。 首先,我们来看一下文档中提到的一些正则表达式,它们用于...

Global site tag (gtag.js) - Google Analytics