如何在 javascript 事件期间阻止元素更改（属性）？答案

【问题标题】：How do stop elements from changing (properties) during javascript events?如何在 javascript 事件期间阻止元素更改（属性）？
【发布时间】：2011-02-25 00:46:04
【问题描述】：

我目前正在用 javascript 制作“拖放”引擎。当我拿起一个元素来移动它时，光标从cursor: move（我在css中设置）变为我不想要的cursor: text。当我移动我不想要的拖动对象时，它还可以从其他元素中选择（突出显示）文本。如何防止这些问题发生？

// JavaScript Document

var posX;
var posY;
var element;
var currentPos;

document.addEventListener("mousedown", drag, false);

function drag(event) {
    if(event.target.className == "square") {
        element = event.target;
        currentPos = findPos(element);
        posX = event.clientX -currentPos.x; //-parseInt(element.offsetLeft);
        posY = event.clientY -currentPos.y; //-parseInt(element.offsetTop);
        document.addEventListener("mousemove", move, false);
    }
}

function move(event) {

    if (typeof(element.mouseup) == "undefined")
        document.addEventListener("mouseup", drop, false);
    //Prevents redundantly adding the same event handler repeatedly

    element.style.left = event.clientX - posX + "px";
    element.style.top = event.clientY - posY + "px";
}

function drop() {
    document.removeEventListener("mousemove", move, false);
    document.removeEventListener("mouseup", drop, false);
    //alert("DEBUG_DROP");
}

function findPos(obj) { // Donated by `lwburk` on StackOverflow
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
}

CSS：

.square {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    cursor:move;
}

p {
    padding: 0px;
    margin: 0px;
    outline-style: dotted;
    outline-color: #000;
    outline-width: 1px;
}

HTML：

<body>

<p class="square">Thing One</p>
<p class="square">Thing Two</p>

</body>

非常感谢您的阅读和帮助！这意味着很多，尤其是因为我刚刚开始学习这门语言。

【问题讨论】：

标签： javascript css javascript-events

【解决方案1】：

嘿，为了防止突出显示，您可以使用 CSS：

* {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

为了防止在事件处理程序中放置默认操作（这可能是光标更改的原因？）

event.preventDefault()

其中 event 是您的事件（传递给处理程序）。您也可以尝试在事件处理程序中设置 CSS 属性：

event.target.setAttribute("style","cursor: move;");

【讨论】：

【解决方案2】：

<p class="square" ondragstart="return false" onselectstart="return false">Thing One</p>

【讨论】：