JavaScript 拖放效果 —— 小拖放也有大智慧
2010-09-14 13:25:12 来源：WEB开发网会发现背景点击触发不了事件，不过点击边框的话还是可以触发。
为什么呢？再用下面的代码测试：
Code
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<bodystyle="border:1pxsolid#FF0000;">
<style>div{width:100px;height:100px;border:1pxsolid#000;}</style>
<divstyle="position:relative;">
<divonclick="alert(1)"style="border-color:#00f;margin:50px;"></div>
<divonclick="alert(2)"style="border-color:#6f0;position:absolute;top:50px;"></div>
</div>
</body>
</html>
应该能看出个大概了，下面两个div超出body（即超出红色框）的部分就触发不了事件。
也就是说当触发事件的点，在body以外，而背景又是透明的，那么就会误认为触发点是在了body外空白的地方，所以触发不了事件。
那解决的方法就是，使事件触发点保持在body内，或者设置一个非透明背景。
那程序中只要给拖放对象设一个背景色就可以解决了，但有时需求正好是要透明（例如切割效果），那怎么办呢？
首先想到的是加上背景色后设置完全透明，但这样连边框，容器内的对象等都完全透明了，这个不好。
我想到的一个解决方法是在容器里面加一个层，覆盖整个容器，并设置背景色和完全透明：
with(this._Handle.appendChild(document.createElement("div")).style){
width=height="100%";backgroundColor="#fff";filter="alpha(opacity:0)";
}
Tags：JavaScript 效果 智慧
编辑录入：爽爽 [复制链接] [打 印]
中查找“JavaScript 拖放效果 —— 小拖放也有大智慧”更多相关内容
中查找“JavaScript 拖放效果 —— 小拖放也有大智慧”更多相关内容更多精彩
赞助商链接
