jquery事件有关问题！对象 click和document click冲突有关问题

最新推荐文章于 2021-04-09 16:01:51 发布
最新推荐文章于 2021-04-09 16:01:51 发布
阅读量3.8k 收藏 6
点赞数 1

帮朋友解决这个问题，我发现用以往想想像的方式来实现，貌似不太可行，所以从网上找了一些解决办法，进行优化，这篇比较详细，所以拿来备忘，另一方面也希望可以帮助需要的同学！

问题背景：jquery事件问题！！对象 click和document click冲突问题

我想点击某个元素显示一个对象， 点击页面任意处，隐藏这个对象   


//点击look对象，显示隐藏mydiv
 $("#look").bind("click", function () {
    
  $("#mydiv").toggle();
    
  })
//点击任意地方，隐藏显示的mydiv

  $(document).bind("click", function () {
    
  if ($("#mydiv").css("display") == "block") {
  $("#mydiv").hide();
  }

  })

这样两个事件冲突了，点击look对象，不会显示mydiv

------解决方案--------------------
防止点击事件冒泡 return false; 
------解决方案--------------------
不是冲突。。是冒泡了，，
$("#look").bind("click", function (e) {
  
$("#mydiv").toggle();
e.stopPropagation
})

试试 
------解决方案--------------------
JScript code 
 $("#look").bind("click", function () {
    
  $("#mydiv").toggle();
    return false;
  })

------解决方案--------------------

  
  

   
   HTML code
   
   
 $(document).bind("click", function (e) {
    if ($(e.target).is('#test')) return;
    else{ 
        if ($("#mydiv").css("display") == "block") {
             $("#mydiv").hide();
        }
    }
  })

------解决方案--------------------
e.stopPropagation
是这个

------解决方案--------------------

    
    

     
     探讨
     
     

     
     
HTML code
     
     

     
     
 $(document).bind("click", function (e) {
     
     
    if ($(e.target).is('#test')) return;
     
     
    else{ 
     
     
        if ($("#mydiv").css("display") == "block") {
     
     
             $("#mydiv").hide();
     
     
       ……
     
     

    
    


------解决方案--------------------

    
    

     
     JScript code
     
     
$("#look").bind("click", function () {  
  $("#mydiv").toggle();  
event.stopPropagation();
  })

------解决方案--------------------

      
      

       
       探讨
       
       

       
       
JScript code
       
       

       
       
$("#look").bind("click", function (event) { 
       
       
 $("#mydiv").toggle(); 
       
       
event.stopPropagation();
       
       
 })
       
       

      
      


------解决方案--------------------
return false就好了.


      
      

       
       JScript code
       
       
<html>

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
  $(this).hide();
  });

$("#look").bind("click", function () {
   
  $("#mydiv").toggle();
return false;
   
  })
//点击任意地方，隐藏显示的mydiv

  $(document).bind("click", function () {
   
  if ($("#mydiv").css("display") == "block") {
  $("#mydiv").hide();
  }

  })
});
</script>
</head>

<body>
<div id='look'>
   click
</div>
<div id="mydiv">
<p>If you click on me, I will disappear.</p>
</div>
</body>

</html>

------解决方案--------------------

        
        

         
         JScript code
         
         
$(function(){
$("#look").click(function (e) {   
     $("#mydiv").show();
     return false;   
  });
//点击任意地方，隐藏显示的mydiv
  $(document).click(function () {   
      $("#mydiv").hide();
  });
});

         
         

         
         

         
         
转自：http://www.myexception.cn/javascript/342655.html

        
        

      
      

    
    

  
  
 


                

        

        

    




    

      

        

            

              
                
                  xudanna
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    6
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
jQuery为iframe的body添加click事件的实现代码

				
			

			

				

					12-11
				

			

		

		

			
				
 <head> <title>为body添加click事件</title> <...charset=utf-8″> [removed][removed] [removed] function show_body_click(){ alert(... } jQuery(document).ready(function(){ //

			
		

	



                

              
                



	

		

			

				
					
JQuery调用绑定click事件的3种写法

				
			

			

				

					01-19
				

			

		

		

			
				
 $(document).ready(function(){  $(#clickme).click(function(){  alert(Hello World click);  });   第二种方式：   $('#clickmebind').bind(click, function(){  alert(Hello World bind);  });...

			
		

	



                


  
              

                


	

		

			

				
					
jQuery中的事件机制与DOM操作

				
			

			

				

					jingjing的博客
				

				

					08-14
					
					241
					
				

			

		

		

			
				
jQuery事件机制
jQuery的事件绑定与Element元素不同，不可以使用onxxx属性，也不能使用addEventListener，而是使用on()，可以理解为on是对于Element元素事件绑定的封装。on()也支持事件代理，事件的类型可以是click、dblclick、mouseover等等。

on(event，[selector]，[data]，fn)
off(event，[selector]，fn)
one(event，[selector]，fn)
trigger(event，[data]

			
		

	





	

		

			

				
					
jQuery的命名冲突noConflict()和DOM加载完毕事件

				
			

			

				

					Night_Emperor的博客
				

				

					09-10
					
					451
					
				

			

		

		

			
				
调用$.noConflict()放弃对window.$的使用权；调用$.noConflict(true)放弃对window.jQuery的使用权。下列是jQuery中的部分源码：定义三个局部变量：var _jQuery = window.jQuery,	 _$ = window.$,	jQuery = function( selector, context ) {};相当于var _jQuery ...

			
		

	



		

			
		



	

		

			

				
					
jQuery事件

				
			

			

				

					qq_41670147的博客
				

				

					12-11
					
					257
					
				

			

		

		

			
				
1、jQuery事件注册
单个事件注册
element.事件(function(){})
$("div").click(function(){事件处理程序})

其他事件和原生基本一致
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等
2、jQuery事件处理
2.1事件处理on()绑定事件
on()方法在匹配元...

			
		

	





	

		

			

				
					
jQuery的区别：$().click()和$(document).on('click','要选择的元素',function(){})的不同

				
			

			

				

					weixin_30267697的博客
				

				

					10-31
					
					475
					
				

			

		

		

			
				
　　jQuery的出现，大大简化了对dom的操作，但是如果不是仔细阅读api和进行操作，就不知道其中最大的优点和使用方式。就拿$().click()和$(document).on('click','要选择的元素',function(){})来说，都是点击事件的操作，但是也有不同的地方。　　1. $(选择器).click(fn)　　　　当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择...

			
		

	





	

		

			

				
					
jquery 调用 click 事件 的 三种 方式

					
热门推荐

				
			

			

				

					安德里亚的成长
				

				

					01-31
					
					10万+
					
				

			

		

		

			
				
第一种方式：

$(document).ready(function(){
  $("#clickme").click(function(){
       alert("Hello World  click");
  });
第二种方式：


 $('#clickmebind').bind("click", function(){
  alert("Hello World  bind

			
		

	





	

		

			

				
					
jquery 为a标签绑定click事件示例代码

				
			

			

				

					12-10
				

			

		

		

			
				
$(document).ready(function() { $("a[name='del']").click(function(){ Ext.Msg.confirm('提示','你确定要删除该公告吗？',function(button,text){ if(button=='yes'){ [removed].href="/admin/note!delete...

			
		

	





	

		

			

				
					
jQuery绑定事件方法及区别(bind,click,on,live,one)

				
			

			

				

					01-19
				

			

		

		

			
				
$(document).ready(function(){  $(#clickme).click(function(){  alert(hello world click)  }) }) 第二种方式（简写方式为第一种）：  $('#clickmebind').bind(click, function(){  alert(Hello World...

			
		

	





	

		

			

				
					
jQuery的区别：$().click()和$(document).on(‘click‘,‘要选择的元素‘,function(){})的不同

				
			

			

				

					郝啊的博客
				

				

					12-07
					
					470
					
				

			

		

		

			
				
jQuery的区别：().click()和().click()和().click()和(document).on(‘click’,‘要选择的元素’,function(){})的不同



			
		

	





	

		

			

				
					
jquery bind('click')传参问题（例如：列表中每行绑定一个事件）

				
			

			

				

					zhb200621的专栏
				

				

					08-05
					
					3572
					
				

			

		

		

			
				
jquey bind 点击事件时，往往会有点击列表中某行，

			
		

	





	

		

			

				
					
jquery click事件传参

				
			

			

				

					淘淘小窝
				

				

					11-03
					
					3万+
					
				

			

		

		

			
				
click()函数用于为每个匹配元素的click事件绑定处理函数。该函数也可用于触发click事件。

click事件就是鼠标按钮单击事件。此外，你还可以额外传递给事件处理函数一些数据。

此外，你可以为同一元素多次调用该函数，从而绑定多个事件处理函数。触发click事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

要删除通过click()绑定的事件，请使用unb

			
		

	





	

		

			

				
					
jQuery：Dom元素绑定click等事件的四个方法。

				
			

			

				

					good_good_xiu的博客
				

				

					04-09
					
					3725
					
				

			

		

		

			
				
1.常见的$(DOM元素).click(function(){});



			
		

	





	

		

			

				
					
jquery中 $().click()和$(document).on('click','要选择的元素',function(){})的不同

				
			

			

				

					丽丽大神ing的博客
				

				

					10-22
					
					2299
					
				

			

		

		

			
				
参考链接：https://www.cnblogs.com/sqh17/p/7746418.html


1. $(选择器).click(fn)
当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。对动态创建的元素无效



2.$(document).on('click','要选择的元素',function(){})
on方法包含很多事件，点击，双击等等事件。和$().click(...

			
		

	





	

		

			

				
					
Jquery 事件委托$(document).on('click') 导致点击事件多次执行

				
			

			

				

					MrLiber的博客
				

				

					03-07
					
					8977
					
				

			

		

		

			
				
用$(document).on(‘click’,’#XX’,function(){…})为元素添加点击事件 结果导致事件会执行多次 。
出现这种情况是因为每点击一下document就会绑定一遍事件，click事件进行了累加绑定，每调用一次，便增加一次绑定，所以导致触发多次事件。
解决这个问题的办法大致有下面几种：
1.每次绑定前先取消上次的绑定，在这个事件绑定的前面紧挨着加上off或者unbind...

			
		

	





	

		

			

				
					
jQuery之$(document)

				
			

			

				

					小菜鸟的博客
				

				

					06-24
					
					2万+
					
				

			

		

		

			
				
$(document)是一个选择器，选中的是整个html所有元素的集合。 

    $(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载，并且在页面内容加载之前。

    使用 $(document).ready()，你能让你的事件在window加载之前加载或触发。所有你写在这个方法里面的都准备在最早的时刻加载或触发。也就是说，一旦DOM在浏览器中注

			
		

	





	

		

			

				
					
Jquery 使用$(document).on(“click“, “#id“, function () {}注意事项

				
			

			

				

					qq_33998475的博客
				

				

					07-17
					
					1358
					
				

			

		

		

			
				
使用这种方式，打开这个页面时，就会累加一次单击事件（打开两次这个页面，执行click时，就会执行2次）


			
		

	





	

		

			

				
					
$().click()与 $(document).on('click','要选择的元素',function(){})

				
			

			

				

					Yanfengting的博客
				

				

					01-14
					
					3098
					
				

			

		

		

			
				
$(".icons_envirnment").on("click","i",function(e){})

给每个 i 绑定一个click事件，点击哪个就触发哪个
jQuery：(xxx).click()和(xxx).click()和(xxx).click()和(xxx).on(‘click’,‘要选择的元素’,function(){})的区别
$(选择器).click(fn) 

当选中的选择器...

			
		

	





	

		

			

				
					
关于jquery的$(document).on()事件多次执行的问题

					
最新发布

				
			

			

				

					05-24
				

			

		

		

			
				
$(document).on() 是 jQuery 中用于绑定事件处理程序的方法，它可以在动态加载元素的情况下仍然能够为这些元素绑定事件。但是，如果在使用 $(document).on() 绑定事件时不小心重复绑定了相同的事件处理程序，就会...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值