jq阻止事件冒泡，模拟下拉列表-白红宇

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

阅读量：5132 次

发布时间：2019-06-13

本文共 2099 字，大约阅读时间需要 6 分钟。

事件冒泡

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

注意：

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

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

2.事件类型

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

模拟下拉列表


          
      请选择 //记得加个标签     
               
       苹果
         
       现在
         
       例子

//注意阻止事件冒泡　　　　$('.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

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

你可能感兴趣的文章

HTML元素定义 ID，Class，Style的优先级

查看>>

构造者模式

查看>>