公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件。

先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并阻止事件冒泡到window)当点击上input的时候就显示ul再给window或者document 绑定一个click事件当点击页面其他地方的时候隐藏ul。

这里还要给ul 添加一个代理点击事件(事件代理比遍历li绑定点击事件性能要高)当点击到下面的li的时候把li里面的内容添加到input里面 并且此时ul 是不能隐藏的 要想ul不隐藏就得阻止事件冒泡防止事件传播到 window或者document上从而隐藏了ul原理跟给input阻止事件冒泡是一样的。

说说上面实现方式的不足就是给window或document添加点击事件当用户每点击一次页面的时候都会去执行一下给window绑定是函数(除了点击到input和ul 阻止了事件冒泡)具体实现代码如下。

<meta charset="UTF-8">
<title>test</title> <style>
*{padding:0;margin:0; }
ul{ list-style: none; }
#test2{
width:170px; }
#box{ padding:30px; }
#list{ width:170px; border:1px solid #ccc; display:none; }
#list li{ padding:5px;cursor:pointer; }
</style>
    <div id="box" >
<input type="text" id="test2" >
<ul id="list" >
<li>111</li>
<li>222</li>
<li>333</li>
<li>44</li>
</ul>
</div>
<script>
var $inp = $('#test2'),
$ul = $('#list'),doc = $(document);
$inp.on('click',show);
doc.on('click',hide);
$ul.on('click','li',changeText);//事件代理性能更好
function changeText(e){
e.stopPropagation();
$inp.val($(this).text());
}
function show(e){
e.stopPropagation(); //阻止事件冒泡
$ul.show();
}
function hide(){
$ul.hide();
} </script>

总结:

优点兼容性好ie6-ie8都ok。

缺点在window上绑定事件用户每次点击页面都会被触发绑定事件。

但我个人认为最优的实现方案不需要给window绑定click事件(用阻止默认事件的方式去实现), 我们只需给input绑定一个focus事件一个blur事件当input focus 的时候就显示ul,当input blur 的时候 就隐藏 ul 在给ul 绑定一个mousedown事件(阻止游览器默认事件)。注意:这里有必要说明一下事件的执行顺序和为什么不能给ul添加点击事件。当点击ul的时候鼠标键上升的时候 mousedown 执行完了input才会失去焦点blur。 mousedown --> blur 如果直接给ul 添加click事件input 会在失去焦点了blur 才会触发ul的click事件 事件执行顺序 blur --> click 当input blur了ul就隐藏了故得不到自己想要的效果。

按照我的方案基于第一种方案的代码稍加改动就可以具体实现的代码如下:

test

<style>
*{padding:0;margin:0; }
ul{ list-style: none; }
#test2{
width:170px; }
#box{ padding:30px; }
#list{ width:170px; border:1px solid #ccc; display:none; }
#list li{ padding:5px;cursor:pointer; }
</style>
  • 111
  • 222
  • 333
  • 44

var $inp = $('#test2'),
$ul = $('#list');
$inp.on('focus',show);
$inp.on('blur',hide);
$ul.on('mousedown','li',changeText);//事件代理性能更好 把mousedown改成click 可以验证我上面说的事件执行顺序感兴趣的自己动手试下。
function changeText(e){
e.preventDefault(); //把阻止事件冒泡改成阻止默认事件
$inp.val($(this).text());
}
function show(e){
$ul.show();
}
function hide(){
$ul.hide();
}

</script>

ie8下的效果图

ie9下的效果

在ie9及以上都ok没什么问题 但是ie8下跟我们想要的效果就不一样了每次点击ul会自动去隐藏了也就是说在ie8下 ul的mousedown是被执行了但是他没有去阻止掉input blur事件让input失去了焦点触发了绑定在blur事件的函数从而隐藏了ul。

总结:

优点不需要在window上绑定事件少一次事件绑定。

缺点兼容性ie9及以上不兼容ie8(有小问题)。

javascript 阻止事件冒泡和阻止默认事件对比的更多相关文章

  1. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

  2. javascript(九)事件冒泡 onmouseenter onmouseenter 默认事件 和 键盘事件

    1 事件冒泡 子元素触发的事件,会往上(父元素)传递: 例子: <div id="box"> <p></p> </div> < ...

  3. JS事件——禁止事件冒泡和禁止默认事件

    Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 一.什么是事件冒泡 在一 ...

  4. jQuery 中的事件冒泡和阻止默认行为

    1.事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...

  5. 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

    哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...

  6. JS事件冒泡及阻止

    事件冒泡及阻止 当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级,一直到window,当然其传播的是事件,绑定的执行函数并不会传播,如果父级没有绑定事件函数,就算传递了事件,也不会有什么表 ...

  7. jQuery中事件对象e的事件冒泡用法示例(事件冒泡与阻止冒泡)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 一个取消事件的简单js例子(事件冒泡与取消默认行为)

    先上代码: <div id='outer' onclick='alert("我是outer")'> <div id="middle" oncl ...

  9. JS 事件冒泡整理 浏览器的事件流

    JavaScript与HTML的交互通过事件来实现.而浏览器的事件流是一个非常重要的概念.不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议, 只需要知道在DOM2中规定的事件流包括了三个部分,事件捕 ...

  10. javascript 停止事件冒泡以及阻止默认事件冒泡

    停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) { // ...

随机推荐

  1. iOS开发中遇到的一些问题及解决方案【转载】

    iOS开发中遇到的一些问题及解决方案[转载] 2015-12-29 [385][scrollView不接受点击事件,是因为事件传递失败] // //  MyScrollView.m //  Creat ...

  2. VPS,虚拟主机,云主机,独立服务器区别

    作者:张朝权链接:http://www.zhihu.com/question/25507629/answer/105594087来源:知乎著作权归作者所有,转载请联系作者获得授权.   独立服务器独立 ...

  3. 1、shell 简介

    Shell 本身是一个用C语言编写的程序,它是用户使用Unix/Linux的桥 梁,用户的大部分工作都是通过Shell完成的.Shell既是一种命令语言,又是一种程序设计语言.作为命令语言,它交互式地 ...

  4. hdu1087 简单DP

    I - 简单dp 例题扩展 Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:32768KB     ...

  5. 搭建hbase-0.94.26集群环境

    先安装hadoop1.2.1,见http://blog.csdn.net/jediael_lu/article/details/38926477 1.配置hbase-site.xml <prop ...

  6. asp.net mvc4 eui datagrid视图重写分页

    效果图 前端代码: @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="vi ...

  7. 解决PopupWindow遮住输入法

    1: PopupWindow中的设置 pop.setInputMethodMode(PopupWindow.INPUT_METHOD_NEEDED); pop.setSoftInputMode(Win ...

  8. LeetCode_Flatten Binary Tree to Linked List

    Given a binary tree, flatten it to a linked list in-place. For example, Given 1 / \ 2 5 / \ \ 3 4 6 ...

  9. git push error: RPC failed; result=56, HTTP code = 0 ,the remote end hung up unexpectedly

    git push的时候发生标题上面的错误,不知道怎么解决.搜索了下stackoverflow,上面说是http的postBuffer不够导致的. 要运行以下命令: git config --globa ...

  10. cf448D Multiplication Table

    D. Multiplication Table time limit per test 1 second memory limit per test 256 megabytes input stand ...