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

最新推荐文章于 2021-05-06 08:41:43 发布

zb219

最新推荐文章于 2021-05-06 08:41:43 发布

阅读量1.1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/zb219/article/details/8118964

版权

javascript 专栏收录该内容

87 篇文章 1 订阅

订阅专栏

<!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里面有,其它浏览器就是在方法里,作为一个默认参数,所以
我们一般不会在其它的浏览器写
οnclick="a(a,b,c)"
这种形式,因为不容易拿到event,所以我们用bind