jq阻止事件冒泡，模拟下拉列表

事件冒泡

如果父元素都事件，子元素也有事件，在点击子元素时候，父元素的也会执行，用冒泡阻止

注意：

1.可以用return false代替e.stopPropagation,e.preventDefault

2.下拉列表记得给要替换的元素放个标签，不然，容易出现只能下拉一次现象

2.事件类型

　　

e.type
e.target
e.pageX  //鼠标相对于页面的坐标  
e.pageY
e.which //获取鼠标的左右中键，键盘事件的按键
e.target.id//获取id
e.target.textContent//获取内容
e.target.value//获取value
e.preventDefault();  //阻止默认事件
e.stopPropagation();    //阻止冒泡事件

模拟下拉列表

<div class="moni">
    <span>请选择</span> //记得加个标签
    <ul class='seList'>
        <li><a href="http://www.jb51.net/article/52307.htm">苹果</a></li>
        <li><a href="http://www.jb51.net/article/52307.htm">现在</a></li>
        <li><a href="http://www.jb51.net/article/52307.htm">例子</a></li>
    </ul>
</div>

//注意阻止事件冒泡　　　　
$('.moni').click(function(){
  $('.selList').css("display","block")
　　e.stopPropagation();
  alert("ss")
})

 $('.selList li').click(function(e){
  $('.selList').css("display","none")
  $('.moni span').text($(this).text())
  e.stopPropagation();   //注意阻止事件冒泡

})

html

<div id="content">
    外层div元素<br>
    <span>内层div元素</span><br>
    外层div元素2
    <div class="search">请选择
        <ul>
            <li><a href="http://www.jb51.net/article/52307.htm">苹果</a></li>
            <li><a href="http://www.jb51.net/article/52307.htm">现在</a></li>
            <li><a href="http://www.jb51.net/article/52307.htm">例子</a></li>
        </ul>
    </div>

</div>
<div id="msg"></div>

jq

        // 为span元素绑定click事件
        $('span').bind("click",function(e){
            var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息
            $('#msg').html(txt);// 设置html信息
            e.stopPropagation()
        });
        // 为div元素绑定click事件
        $('#content').bind("click",function(e){
            var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
            $('#msg').html(txt);
            e.stopPropagation()

        });
        $('.search').click(function(e){
            $('ul').css('display','block')
            e.stopPropagation()

        })
        $('ul li').click(function(e){
            $('ul').css('display','none')
            $('.search').html($(this).text())
//            e.stopPropagation()
//            e.preventDefault()
            //事件类型
            console.log(e.type)
            console.log(e.target)
            console.log('当前位置'+ e.pageX+','+e.pageY)
            //可以用return false替换阻止事件默认和事件冒泡，
            return false

        })

//获取鼠标的键 1=左键 2=中键 3=右键
$('span').click(function(e){
    console.log(e.which)
})
//获取键盘按键
$('input').keyup(function(e){
    console.log(e.which)
})

 

转载于:https://www.cnblogs.com/summerXll/p/6498990.html