`

JQuery 提供了两种方式来阻止事件冒泡

 
阅读更多

方式一:event.stopPropagation();

        $("#div1").mousedown(function(event){
            event.stopPropagation();
        });

方式二:return false;

        $("#div1").mousedown(function(event){
            return false;
        });

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。

场景应用: Google 和 百度的联想框,当弹出下拉列表,用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。

示例测试代码: 当文本输入框获取焦点后,在div1的mousedown事件中采用 event.stopPropagation(); 代码,我们鼠标单击红色区域后文本输入框光标失去。而当我们使用 return false; 代码时,鼠标单击红色区域光标仍然停留在文本输入框内。

分享到:
评论

相关推荐

    JQuery 提供了两种方式来阻止事件冒泡.rar

    除了这两种阻止事件冒泡的方法,JQuery还提供了`event.preventDefault()`,这个方法并不阻止事件冒泡,而是阻止了事件的默认行为。例如,点击链接默认会跳转到新的URL,但如果在事件处理程序中调用了`event....

    JQuery中阻止事件冒泡几种方式及其区别介绍

    JQuery 提供了两种方式来阻止事件冒泡。 方式一:event.stopPropagation(); 代码如下: $(“#div1”).mousedown(function(event){ event.stopPropagation(); }); 方式二:return false; 代码如下: $(“#div1”)....

    js阻止冒泡及jquery阻止事件冒泡示例介绍.docx

    jQuery提供了一种更简洁的方式来处理事件,其阻止事件冒泡同样有两种主要方式: ##### 1. 使用 `event.stopPropagation();` 这种方式仅阻止事件的进一步传播,而不影响当前事件的执行。 ```javascript $("#element...

    利用JQuery阻止事件冒泡

    JQuery提供了两种方法来阻止事件冒泡,分别是event.stopPropagation()和event.preventDefault()。 1. 使用event.stopPropagation() 当你在事件处理函数中调用event.stopPropagation()时,它会阻止事件继续传播到更...

    js阻止冒泡及jquery阻止事件冒泡示例介绍

    标题中提到的“js阻止冒泡及jquery阻止事件冒泡示例介绍”涉及JavaScript和JQuery两种技术在事件处理中阻止事件冒泡的概念。冒泡是指当一个元素上触发了某个事件(如点击),这个事件不仅会在该元素上进行处理,还会...

    jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法

    在JavaScript和jQuery中,事件处理有两个关键概念:事件冒泡和事件委托。事件冒泡是指事件从最深的节点开始,然后逐级向上层元素传播事件。事件委托则是利用事件冒泡的特性,将事件处理器绑定到一个父元素上,以此来...

    jQuery中阻止冒泡事件的方法介绍

    2. **`return false`**:这是一个简化的阻止冒泡的方式,同时也阻止了事件的默认行为(如链接的跳转)。但是,这种方法并不推荐,因为它可能会引起其他副作用,比如阻止了事件处理函数内部的正常流程。 3. **兼容性...

    浅谈jQuery 中的事件冒泡和阻止默认行为

    综上所述,jQuery中的事件冒泡和阻止默认行为是前端开发中经常遇到的两种情况。合理地使用`stopPropagation()`和`preventDefault()`这两个方法,可以帮助我们编写出更为丰富和动态的Web应用。掌握这些概念和技巧,...

    jquery阻止冒泡事件使用模拟事件

    总结来说,处理冒泡事件和模拟事件是前端开发中常见且重要的任务,掌握这些技能可以帮助我们更好地控制页面行为,提高用户体验。通过上述示例,我们可以看出使用jQuery实现这两项功能相对简单且直观,但如何恰当地...

    jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理

    在jQuery中,触发事件通常有两种方式:对于浏览器内置的事件,我们可以直接使用`.click()`等方法,如`$(...).click()`;而对于自定义事件,我们需要使用`.trigger()`方法。例如,定义了一个自定义事件`"chuaClick"`...

    一个小例子解释如何来阻止Jquery事件冒泡

    为了阻止事件冒泡,文档提到了两种方法: 1. 使用event.stopPropagation()方法: 这个方法是jQuery封装的方法,用于阻止事件冒泡。当事件处理器被触发时,调用这个方法可以阻止事件继续向上冒泡。在文档中,通过...

    jQuery阻止冒泡和HTML默认操作

    jQuery提供了多种方式来处理这种情况: 1. 使用`return false`:在事件处理函数中,`return false`可以同时阻止事件的默认行为和冒泡。这意味着点击`<a>`元素时,不会发生页面跳转,且事件不会向上冒泡。 ```...

    JQuery绑定事件

    jQuery中的事件绑定主要通过以下几种方式实现: 1. **`.on()`**:这是jQuery中最通用的事件绑定方法,可以用于绑定任何类型的事件。例如: ```javascript $('#myElement').on('click', function() { console.log...

    js阻止默认浏览器行为与冒泡行为的实现代码.docx

    下面将详细介绍如何实现这两种功能。 1. **阻止浏览器默认行为**: 当我们不希望浏览器执行其默认操作时,可以使用`event.preventDefault()`方法。这个方法适用于支持W3C标准的浏览器,例如Firefox、Chrome等。...

    理解jquery事件冒泡

    事件冒泡是JavaScript中的一种机制,当一个元素上的事件被触发后,该事件会沿着DOM树向上层元素传播,直到根节点。这种机制允许父元素捕获到在子元素上发生的事件。在某些情况下,事件冒泡可以非常有用,比如在给定...

    Js冒泡事件详解及阻止示例

    阻止事件冒泡的方法主要有两种: 1. 使用原生JavaScript: - 对于现代浏览器,可以使用`event.stopPropagation()`方法阻止事件继续向上级元素传播。 - 对于旧版的Internet Explorer浏览器,需要使用`event....

    JS阻止事件冒泡的方法详解

    总结来说,阻止事件冒泡和阻止默认行为是两种不同的操作,它们有时会被同时使用,有时只需要使用其中一种。在开发过程中,开发者应该根据实际需要选择合适的方法来处理事件,以确保程序按照预期工作。例如,当创建...

    jQuery中事件的冒泡和默认行为

    阻止事件冒泡有以下两种方式: 1. **返回false**:在事件回调函数的末尾加上`return false;`,这不仅可以阻止事件冒泡,还能取消事件的默认行为。 2. **使用stopPropagation()**:如果事件回调函数接收到了`event`...

    JS中绑定事件顺序(事件冒泡与事件捕获区别)

    JavaScript中的事件处理机制是网页交互的核心,其中包括了两种主要的事件传播模式:事件冒泡(Bubbling)和事件捕获(Cropping)。事件冒泡是指事件从最深的节点开始,然后逐级向上传播到最外层的节点。而事件捕获则...

Global site tag (gtag.js) - Google Analytics