if(event.target==this) 困惑求解？

hdchangchang 2012-10-29 08:29:25
下面代码中的if(event.target==this){} 为何不起作用？？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*           {padding:0;margin:0}

body        {font-size:12px; color:#666}

#demo       {margin:30px; position:relative}

#demo input{margin-top:1px;padding-left:5px;border:1px solid #999;width:700px;height:20px;font-size:14px;color:#000}

#dropbox   {display:none;z-index:9999;padding:5px;background:#fff;border:1px solid #999;border-top:0;z-index:999; position:absolute; left:39px; width:695px;}

#dropbox a{margin-right:8px;text-decoration:none}

#dropbox a:hover{text-decoration:underline}

#dropbox p{line-height:24px}

#dropbox em.close{float:right;color:#999;font-style:normal;cursor:pointer}

</style>

<script type="text/javascript" src="ceshi/jquery-1.8.0.js"></script>

<script  type="text/javascript">



(function($){

    $.fn.clime=function(iset){

	   iset=$.extend({

	     inputtext:"#tagsboxinput",    //文本输入框

		 dropbox:"#dropbox",           //点击显示的box

		 closebq:".close"

	   

	   

	   },iset||{});

	   $(iset.inputtext).click(function(event){

	       $(this).closest("label").siblings(iset.dropbox).show();		     

	   });

	   $(iset.closebq).click(function(event){

	       $(this).parent("#dropbox").hide();	   

	   });

	   $(document).click(function(event){

	       if(event.target==this){                  // if 判断是为了阻止事件冒泡

	         $("#dropbox").hide(); 

		   }

	   });

	   $("#dropbox p a").click(function(){

	       var $textin=$(this).parents("#dropbox").siblings("label").find(".tagsbox")

	       var $val=$textin.val();

		   var $text=$(this).text();

		   var $array=$val.split(" ");

		   var $br=$.inArray($text,$array);

		   if($br<=0){

		     $textin.val($val+" "+$text)

		   }

		   	   

	   })

	   

	   

	   

	

	}

   return this;

})(jQuery)



$(function(){

   $("#demo").clime();



})





</script>

</head>

<body>

<!--DEMO start-->



<div id="demo">

<label for="tagsboxinput"><strong>标签：</strong><input type="text" value="点我" id="tagsboxinput" class="tagsbox" data-count="10" /></label>



<div id="dropbox">

	

	<em class="close" title="关闭">关闭</em>

	

	<p><strong>温馨提示：</strong>选择下面的热门标签及使用过的标签,标签将自动排列至表单域。</p>

	

	<p><strong>热门标签：</strong><a href="javascript:void(0)">时光漫步</a><a href="javascript:void(0)">JavaScript</a><a href="javascript:void(0)">jQuery Plugin</a><a href="javascript:void(0)">那一年</a><a href="javascript:void(0)">jQuery插件</a><a href="javascript:void(0)">简单</a><a href="javascript:void(0)">星空</a><a href="javascript:void(0)">梦田</a><a href="javascript:void(0)">晴朗</a><a href="javascript:void(0)">mrthink.net</a></p>

	

	<p><strong>您使用过的标签：</strong><a href="javascript:void(0)">许巍</a><a href="javascript:void(0)">Sophie Zelmani</a><a href="javascript:void(0)">王菲</a><a href="javascript:void(0)">小娟&山谷里的居民</a><a href="javascript:void(0)">Ke$Ha</a><a href="javascript:void(0)">Shakira</a><a href="javascript:void(0)">朴树</a><a href="javascript:void(0)">罗大佑</a></p>

	

</div>





</body>

</html>
...全文
340 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
hdchangchang 2012-10-29
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 的回复:]

纠正：后面的event.stopPropagation();应该是e.stopPropagation();
[/Quote]

谢谢你的帮忙！

嗯 是的 确实应该用 event.stopPropagation() 阻止事件冒泡，我之前也用这个来着 ，但是用这个要在好几个地方写 event.stopPropagation()，感觉很罗嗦，就转而想加 if(event.target==this){} 来达到同样的效果 ，这样就不用总是重复写event.stopPropagation()了

scscms太阳光 2012-10-29
  • 打赏
  • 举报
 回复
纠正：后面的event.stopPropagation();应该是e.stopPropagation();
scscms太阳光 2012-10-29
  • 打赏
  • 举报
 回复
我明白你的目的：点击页面任何地方（除某个区域）都执行隐藏，就像我们做提示信息一样。
而你的思路是错误的：判断点击的对象是不是本身！
<div class="outbox">

    <div class="innerbox">11111</div>

    4444

</div>

<script type="text/javascript">

    $(document).ready(function(){

        $(".innerbox").click(function(event){

            alert("本身");

            event.stopPropagation();

        });

        $(document).click(function(e){

            alert("除“.innerbox”外的任何地方");

            //$("#dropbox").hide();

            event.stopPropagation();

        })

    })

</script>
hdchangchang 2012-10-29
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 的回复:]

把this和event.target都提示下，this的结果为[object HTMLDocument],event.target的结果为[object HTMLInputElement]
http://www.cnblogs.com/12go/archive/2011/12/28/2304502.html
你看下这个吧
[/Quote]

我做 if(event.target==this){} 判断的目的 ：
当点击 页面空白区域的时候 ，才执行 $("#dropbox").hide(); 操作，
原理 有错误吗？
当我点击空白区域的时候：this的结果为[object HTMLDocument]，event.target的结果为[object HTMLHtmlElement]
我对这个不是很明白？是因为是 $(document) 触发的事件 才这样吗？下面代码就可以这样实现！



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

.outbox                      {width:500px;height:500px;background-color:#CEC5A2}

.innerbox                    {width:200px;height:200px;background-color:#092F10}





</style>

<script type="text/javascript" src="ceshi/jquery-1.8.0.js"></script>

<script  type="text/javascript">

$(function(){

    $(".outbox").click(function(event){

	 alert(this);

	 alert(event.target);

	 if(event.target==this){

	  alert("outbox")	

	  }

	})





})





</script>

</head>



<body>



<div class="outbox">



<div class="innerbox"></div>



</div>



</body>

</html>
mingfish2 2012-10-29
  • 打赏
  • 举报
 回复
楼上的文章好，收藏了
初夏_90 2012-10-29
  • 打赏
  • 举报
 回复
把this和event.target都提示下，this的结果为[object HTMLDocument],event.target的结果为[object HTMLInputElement]
http://www.cnblogs.com/12go/archive/2011/12/28/2304502.html
你看下这个吧
scscms太阳光 2012-10-29
  • 打赏
  • 举报
 回复
$(document).click(function(event){
if(event.target==this){ // if 判断是为了阻止事件冒泡
$("#dropbox").hide();
}
});
//首先原理上不对，任何一个节点点击首先是它本身，然后是父级一级级上去。你的目的只是阻止事件冒泡：
        $(document).click(function(e){

            $("#dropbox").hide();

            e.stopPropagation();//阻止事件冒泡

        });
hdchangchang 2012-10-29
  • 打赏
  • 举报
 回复
明白了写 等再查资料学习吧 谢谢xzy21com！
scscms太阳光 2012-10-29
  • 打赏
  • 举报
 回复
我们来分析一下：
$(document).click(function(event){
if(event.target==this){ // if 判断是为了阻止事件冒泡
$("#dropbox").hide();
}
});
====这代码中的this你希望代表什么？首先$(document).click()代表的是文档中所有节点都绑定此事件，换句话说是点击的主体是变化的，那this也是变化。if(event.target==this)就没有任何意义。
====如果上面的this你是想代表$("#demo")，那你不应该写到$(document).click()里面，应该是前面引用一个变量 var _this=this; 然后用_this引用到$(document).click()里面来判断才对呀。
<div class="outbox">

    <div id="innerbox">11

        <div id="t">000000000</div>

        111</div>

    4444

</div>

<script type="text/javascript">

    (function($){

        $.fn.clime=function(){

            var _this=$(this).attr("id");

            $(document).click(function(e){

                if($(e.target).attr("id")!=_this){

                    alert("空白地方");

                }else{

                    alert("绑定元素本身");

                }

            });

        }

    })(jQuery)



    $(document).ready(function(){

        $("#innerbox").clime();

    })

</script>
直接对象判断好像不成立，所以判断对应的ID
前端面试题总结
JS 基础知识点及常考面试题（一） JS 对于每位前端开发都是必备技能，在小册中我们也会有多个章节去讲述这部分的知识。首先我们先来熟悉下 JS 的一些常考和容易混乱的基础知识点。 原始（Primitive）类型 涉及面试题：原始类型有哪几种？null 是对象嘛？ 在 JS 中，存在着 6 种原始值，分别是： boolean null undefined number string symbo...
获取网页html
#import "wed.h" @implementation wed +(NSString*) urlstring:(NSString*)strurl{          NSURL *url = [NSURL URLWithString:strurl];     NSData *data = [NSData dataWith
特征选择+++分裂大法好
1，xgboost分布式预测 2，xgboost特征选取代码   ====================================================================================================================================================================...
【面试一】
#2021·HTML5大前端企业面试真题宝典 第一部分：HTML5+CSS3 1、父元素和子元素宽高不固定，如何实现水平垂直居中 第一种方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
Java程序员面试题
下面的内容是对网上原有的Java面试题集及答案进行了全面修订之后给出的负责任的题目和答案，原来的题目中有很多重复题目和无价值的题目，还有不少的参考答案也是错误的，修改后的Java面试题集参照了JDK最新版本，去掉了EJB 2.x等无用内容，补充了数据结构和算法相关的题目、经典面试编程题、大型网站技术架构、操作系统、数据库、软件测试、设计模式、UML等内容，同时还对很多知识点进行了深入的剖析，例
JavaScript

87,902

社区成员

224,615

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章