鼠标滑过的浮出层，采用的是kissy 1.1.5（小牛试刀了一下）

最新推荐文章于 2021-08-05 14:37:04 发布

nelson

最新推荐文章于 2021-08-05 14:37:04 发布

阅读量1.2k

点赞数

分类专栏： Javascript 文章标签： function scroll div class button safari

本文链接：https://blog.csdn.net/Do_it__/article/details/5996834

版权

Javascript 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>First Grid Demo</title>
<style>
/*body,button,input,select,textarea{
	font:12px/1.5 '微软雅黑',Verdana,Tahoma,Arial,/5b8b/4f53;/*后面是宋体的编码*//*
}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
	margin: 0px;
	padding: 0px;
}
body{
	padding:20px;
}
.cancel-reason{
	position: absolute;
	border-top: 1px solid #D7C36C;
	border-bottom: 1px solid #D7C36C;
}
.cancel-reason .reason-detail{
	position: relative;
	border-left: 1px solid #D7C36C;
	border-right: 1px solid #D7C36C;
	margin: 0px -1px;
	background-color: #FFFAD2;
	padding: 5px;
	width: 260px;
}
.reason-detail div{
	background-color: #FFFFFF;
	padding:5px;
}
.cancel-reason span{
	color: #808080;
}
.cancel-reason p{
	text-indent: 5em;
	margin:0px;
	padding:0px;
}
.cancel-reason i, .cancel-reason s{
	width: 0px;
	height: 0px;
	font-size: 0px;
	line-height: 0;
	overflow: hidden;
	border-width: 6px; /*for i change at s*//*
	position: absolute;
	border-color:transparent #D7C36C transparent transparent;
    border-style:dashed solid dashed dashed;
	left:-12px;
    top:12px;
	z-index: 30;
}
.cancel-reason s{
	border-width: 5px;
	border-right-color: #FFFAD2;
	left: -10px;
	top: 13px;
	z-index: 40;
}*/
</style>
<script src="Kissy-min.js" <script>
</head>
<body>

<div id="todo" style="padding:50px;" mce_style="padding:50px;">
<a href="#" mce_href="#" class="J_CancelReason">sdsfsaaaaaaaaaaaaaa</a>
</div>
<script type="text/javascript"><script>
</body>
</html>

最开始我本来继续沿用KISSY.DOM.offset(cancelDiv, {left:parseInt(cancelOffset.top)-12, top:parseInt(cancelOffset.left)+150})但是问题出现了，每次鼠标滑动一次，它的top和left就累加一次。我想这应该是它的bug吧，所以后来听星斗的建议，还是用cancelDiv.style.left来定义。

而现在我要做的事就是去找了这个bug的原因，去看源代码吧~星斗如是说。

问题找到了：

// 获取 elem 相对 elem.ownerDocument 的坐标
    function getOffset(elem) {
        var box, x = 0, y = 0,
            w = getWin(elem[OWNER_DOCUMENT]);
        // 根据 GBS 最新数据，A-Grade Browsers 都已支持 getBoundingClientRect 方法，不用再考虑传统的实现方式
        if (elem[GET_BOUNDING_CLIENT_RECT]) {
            box = elem[GET_BOUNDING_CLIENT_RECT]();
            // 注：jQuery 还考虑减去 docElem.clientLeft/clientTop
            // 但测试发现，这样反而会导致当 html 和 body 有边距/边框样式时，获取的值不正确
            // 此外，ie6 会忽略 html 的 margin 值，幸运地是没有谁会去设置 html 的 margin
            x = box[LEFT];
            y = box[TOP];
            // iphone/ipad/itouch 下的 Safari 获取 getBoundingClientRect 时，已经加入 scrollTop
            if (UA.mobile !== 'apple') {
                x += DOM[SCROLL_LEFT](w);
                y += DOM[SCROLL_TOP](w);
            }
        }
        return { left: x, top: y };
    }
// 设置 elem 相对 elem.ownerDocument 的坐标
    function setOffset(elem, offset) {
        // set position first, in-case top/left are set even on static elem
        if (DOM.css(elem, POSITION) === 'static') {
            elem.style[POSITION] = RELATIVE;
        }
        var old = getOffset(elem), ret = { }, current, key;
        for (key in offset) {
            current = PARSEINT(DOM.css(elem, key), 10) || 0;
            //由下面这个地方可以看到当元素是隐藏元素时，它就获取不到这个元素的offset也就是old[key]中的top和left都为零
            //但是它的current不为零而是当前存在的值，这就导致了top和left累加了。
            ret[key] = current + offset[key] - old[key];
        }
        DOM.css(elem, ret);
    }