个人中心
gpt4 book ai didi

javascript - img/div 上鼠标事件的差异

转载 作者：行者123 更新时间：2023-11-28 10:34:52 27 4
gpt4 key购买 nike

我在网页上有一个小工具，可以单击它并沿着水平线拖动。首先，我将拖动 handle 作为 img。我在布局方面遇到了一些问题，后来意识到使用带有 img 背景的 div 可能会更好。

因此，我将拖动 handle 更改为使用 div，并且在我的 javascript 代码中发现了一个非常明显的错误。我将 onMove 和 onUp 事件附加到 handle 本身。例如，如果我单击拖动 handle div，然后将鼠标向上移出 div(因为 div 只左右移动)，则它不会捕获 onUp 或 onMove 事件。

但我不明白的是，为什么当我使用 img 标签时它工作得很好。这是一个错误还是图像有什么有趣的地方使它们表现出这种行为？保留使用 img 并保留代码原样是否对 future 安全？

最佳答案

When drag starts (onDown or onClick), you should actually dynamically attach onUp and onMove events to document instead of handle. Just don't forget to clear them onUp.

However, there should be no difference between <img> and <div> in this case.

-- 编辑--

我的观点是正确的。看来，自 FF3 以来，FF 中的 img 和 div 处理略有不同。它使您能够将图像拖到计算机上，但我们可以绕过它:)。

无论如何，我对您的脚本进行了一些轻微修改，对其进行了一些清理，现在它应该可以在所有浏览器中运行。我已经在我的计算机上使用 Firefox 3.5.5、Safari 4.0.3、Google Chrome 和 Opera 10.1 对其进行了测试。

但是，我没有办法在 IE 上测试它，所以请报告结果。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Page Title</title>
<script>
window.onload = function() { //After page is loaded this script will start automaticly
    var divEl = document.getElementById("myDiv"); // Locate element with id "myDiv"
    var imgEl = document.getElementById("myImg"); // Locate element with id "myImg"
    divEl.onmousedown = onDown; // Assign funnction to event mousedown on "myDiv"
    imgEl.onmousedown = onDown; // Assign funnction to event mousedown on "myImg"

    function onDown(e) { // Mouse is down, long live the mouse :)
        $el = this;
        if (e.preventDefault) { e.preventDefault(e); } // This prevents default "drag image" behaivour
        window.onmousemove = function(e) { // Assign function onmousemove to window
            this.onmouseup = function(e) { // When we do a mouseup anywhere on window
                window.onmousemove = undefined; // We clear onmouse from window
                window.onmouseup = undefined; // We clear onmouseup from window
            }
            /* Part borowed from http://www.quirksmode.org/js/events_properties.html */
            if (e.pageX) { posx = e.pageX; } // In case it is a normal browser
            else if (e.clientX) { // In case it is IE
                posx = e.clientX + document.body.scrollLeft+document.documentElement.scrollLeft;
                }
            /* End of borowed part */   
            $el.style.left = posx-parseInt($el.offsetWidth)/2+"px"; // Move this element to where mouse is
        }
    }
}   
</script>
<style>
    #myImg, #myDiv { display: block; position: relative; left: 0; width: 100px; height: 50px; }
    #myImg { border: 1px solid red; }
    #myDiv { border: 1px solid blue; background-color: lime;}
</style>
</head>
<body>
    <img src="some_image.png" alt="my img" id="myImg">
    <div id="myDiv">My div</div>
</body>
</html>

啊，是的。本示例中的 CSS 和 JS 采用 HTML 格式，仅用于测试目的。在实际代码中，建议您将它们分开到自己的文件中。

祝你好运:)

关于javascript - img/div 上鼠标事件的差异，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1723975/

27 4 0
文章推荐： javascript - 插入字段的 Tabindex
文章推荐： javascript - 循环中将城镇名称地理编码为其坐标
文章推荐： javascript - jQuery 绑定(bind) ajax load() 事件
文章推荐： asp.net - 如何使用 javascript 启用 linkbutton 服务器控件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com