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

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

// 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>

非常感谢你的阅读，甚至更多的帮助！这意味着很多，特别是因为我刚开始学习这门语言。

来源

2011-02-25 Dbz

嘿，防止彰显您可以使用CSS：

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

为了防止在事件处理程序的默认操作（？这可能是你的光标变化的原因）把

event.preventDefault()

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

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

来源

2011-02-25 00:53:19 KeatsKelleher

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

来源

2011-02-25 01:11:54 mVChr

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

回答

相关问题