ondragstart 事件未触发且无法正常工作

Question

我有 3 个按钮，我想在拖动、单击或结束拖动它们时看到一条消息，但我对事件的触发感到很困惑。
让我给你举个例子：

function click(event){
    event.preventDefault();
    /*
    lastwordchoosed = "";
    isindrag = true;
    */
    //lastwordchoosed += document.getElementById(id).innerHTML;
    console.log("you started dragging");
}
function over(event){
    event.preventDefault();
    console.log("you go on a button")
        //lastwordchoosed += document.getElementById(id).innerHTML;
        debugger;
}
function up(event){
    event.preventDefault();
    console.log("you stopped dragging");
        //lastwordchoosed += document.getElementById(id).innerHTML
        debugger;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p draggable="true" id="b1" ondragstart="click(event)" ondragover="over(event)" ondragend="up(event)" style="font-size: 30pt;">a</p>
    <p draggable="true" id="b2" ondragstart="click(event)" ondragover="over(event)" ondragend="up(event)" style="font-size: 30pt;">z</p>
    <p draggable="true" id="b3" ondragstart="click(event)" ondragover="over(event)" onmouseup="up(event)" style="font-size: 30pt;">b</p>
    <p id="demo"></p>
</body>
<script src="index.js"></script>
</html>

但是 dragstart 事件不起作用，当我开始拖动一个元素时，它并没有说你开始了 dragging.Why?

Answer 1

click()是javascript的内置按钮对象。因为 function click(event) 不工作。需要更改函数名称。

function click1(event){
    event.preventDefault();
    /*
    lastwordchoosed = "";
    isindrag = true;
    */
    //lastwordchoosed += document.getElementById(id).innerHTML;
    console.log("you started dragging");
}
function over(event){
    event.preventDefault();
    console.log("you go on a button")
        //lastwordchoosed += document.getElementById(id).innerHTML;
        debugger;
}
function up(event){
    event.preventDefault();
    console.log("you stopped dragging");
        //lastwordchoosed += document.getElementById(id).innerHTML
        debugger;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p draggable="true"  id="b1" ondragstart="click1(event)" ondragover="over(event)" ondragend="up(event)" style="font-size: 30pt;">a</p>
    <p draggable="true"  id="b2" ondragstart="click1(event)" ondragover="over(event)" ondragend="up(event)" style="font-size: 30pt;">z</p>
    <p draggable="true" id="b3" ondragstart="click1(event)" ondragover="over(event)" onmouseup="up(event)" style="font-size: 30pt;">b</p>'
 

    <p id="demo"></p>
</body>
<script src="index.js"></script>
</html>

Answer 2

ondragstart 事件上的 click() 函数没有触发，因为 <p> 对应的 DOM 元素上已经有一个 click() 方法。

将函数名称更改为其他名称（例如 startDragging()）以使其正常工作。

在此处了解更多信息：

JavaScript function name can't be set as click?

ondragstart 事件未触发且无法正常工作

ondragstart event not firing and not working

html

javascript

events