ondragstart event not firing and not working-CodePudding

i have 3 buttons and i wanna see a message when i drag or click or end drag them but I'm so confused with the firing of the events.
let me show you an example :

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)" onm ouseup="up(event)" style="font-size: 30pt;">b</p>
    <p id="demo"></p>
</body>
<script src="index.js"></script>
</html>

but the dragstart event doesn't work and when i start dragging on an element it doesn't say you started dragging.Why?

CodePudding user response：

click() is the inbuilt of javascript's button object. for that function click(event) not working. need change Function name.

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)" onm ouseup="up(event)" style="font-size: 30pt;">b</p>'
 

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

CodePudding user response：

The click() function on ondragstart event is not firing because there's already a click() method on the DOM element corresponding to <p>.

Change the name of the function to something else (e.g. startDragging()) to make it work.

Learn more here: