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

下面代码中的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>

解决方案 »

  1.   

    $(document).click(function(event){
               if(event.target==this){                  // if 判断是为了阻止事件冒泡
                 $("#dropbox").hide(); 
               }
           });
    //首先原理上不对，任何一个节点点击首先是它本身，然后是父级一级级上去。你的目的只是阻止事件冒泡：        $(document).click(function(e){
                $("#dropbox").hide();
                e.stopPropagation();//阻止事件冒泡
            });
      

  2.   

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

  3.   


    我做  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>
      

  4.   

    我明白你的目的：点击页面任何地方（除某个区域）都执行隐藏，就像我们做提示信息一样。
    而你的思路是错误的：判断点击的对象是不是本身！<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>
      

  5.   

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

  6.   


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

  7.   

    我们来分析一下：
    $(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
      

  8.   

    明白了写 等再查资料学习吧 谢谢xzy21com！