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>
[解决办法]
$(document).click(function(event){
if(event.target==this){ // if 判断是为了阻止事件冒泡
$("#dropbox").hide();
}
});
//首先原理上不对，任何一个节点点击首先是它本身，然后是父级一级级上去。你的目的只是阻止事件冒泡：
- JScript code
$(document).click(function(e){ $("#dropbox").hide(); e.stopPropagation();//阻止事件冒泡 });