一个outerclick解决方案,看jquery里面的one,事件,和特效

来源:互联网 发布:淘宝美工招聘 编辑:程序博客网 时间:2024/05/22 00:23
<!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>    <title></title>    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>    <style>    #temLoadDiv    {        display:none;z-index:99;position:absolute;background-color:Red;    }    </style>    <script>        var tipwindows = function (e) {            //生成容器全局变更            if (window.temLoadDiv == null) {                window.temLoadDiv = $("<div id='temLoadDiv'></div>");                window.temLoadDiv.appendTo($("body"));            }            //因为是通过bind绑定事件,所以我们只能这样取参数            var htmlstr = arguments[0].data.htmlstr;            var eventsrc = arguments[0].data.eventsrc;            //获取事件源            var a = e.target;            //事件源是不是触发按纽,是不是容器本事,是不是在容器里面,这里的find方法是查找一个元素是否包含另一个元素            //jq1.4不支持,1.7支持            if (eventsrc[0] == a || $("#temLoadDiv")[0] == a || $("#temLoadDiv").find(a)[0]) {                //如果事件源在内部,给document加一个click事件监听                //用one方法,只执行一次,下次事件源还在容器内,就再加一次监听,如果不在,容器隐藏,并且document也不会有onclick事件监听                //注意,要先判断事件源,再innerHTML,如果先innerHTML,如果事件源在容器内,容器的内容又发生改变,那事件源会被冲掉,无法判定事件源是否在容器内了                $(document).one("click", arguments[0].data, tipwindows);                //赋内容,定位                window.temLoadDiv.html(htmlstr);                var temoffset = eventsrc.offset();                window.temLoadDiv.css('left', temoffset.left + 20);                window.temLoadDiv.css('top', temoffset.top + 20);//下拉特效                window.temLoadDiv.slideDown();            }            else {                //事件源在外部,淡出效果                $("#temLoadDiv").fadeOut();            }        } $(function () {            $("#aa").bind("click", { htmlstr: "的原理选择器1111 且与或<br /><div id='kk2'>dddddddddd</div><br />kkkk", eventsrc: $("#aa") }, tipwindows);        });    </script></head><body><div  id="aa" >dfdfdf</div></body></html>


题外话
一直想找jq里面的window.event,发现没有,是因为event作为全局变量,只在IE里面有,其它浏览器就是在方法里,作为一个默认参数,所以
我们一般不会在其它的浏览器写
onclick="a(a,b,c)"
这种形式,因为不容易拿到event,所以我们用bind

原创粉丝点击