当前位置: 代码迷 >> JavaScript >> if(event.target==this) 疑惑求解
  详细解决方案

if(event.target==this) 疑惑求解

热度:399   发布时间:2012-11-08 08:48:11.0
if(event.target==this) 困惑求解?
下面代码中的if(event.target==this){} 为何不起作用??

JScript code
<!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>

 
  相关解决方案