problem description
drag an element with draggable=true set to another element that listens to mouseup, and the mouseup event cannot be triggered.
this problem is encountered when working on a project. The requirement is that there is a map, there is a list next to the map, and the elements in the list can be dragged onto the map to generate a point.
what I do is set the draggable=true of the list element to become a draggable element, listen for the mouseup event on the map, and drag the list element to the map to trigger the mouseup event to get the coordinate generation point.
the environmental background of the problems and what methods you have tried
operating environment in which bug appears:
operating system (version number) / browser (version number)
windows (10) / chrome (66.0.3359.181 official version 64-bit),
windows (10) / chrome (69.0.3497.100 official version 64-bit),
macOSX (10.11.6) / chrome (69.0.3497.100 official version 64-bit)
operating environment for normal operation:
macOSSierra (10.12.4) / chrome (69.0.3497.100 64-bit)
according to the test, it has nothing to do with the browser version, but with the operating system version.
related codes
the following is a simulation of a small demo, based on the actual project. After testing, this problem still exists
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<style type="text/css">
html,
body,
ul,
li {
margin: 0;
padding: 0;
}
-sharpcontainer {
width: 500px;
height: 500px;
position: relative;
}
-sharpmap {
width: inherit;
height: inherit;
background: -sharpd9d9d9;
position: relative;
}
-sharplist {
width: 100px;
height: 100%;
list-style: none;
position: absolute;
top: 0;
right: 0;
background: -sharpfffff1;
}
li:not(:last-child) {
border-bottom: 1px solid -sharpd9d9d9;
}
</style>
<body>
<div id="container">
<div id="map"></div>
<ul id="list">
<li draggable="true">1</li>
<li draggable="true">2</li>
<li draggable="true">3</li>
<li draggable="true">4</li>
</ul>
</div>
</body>
<script type="text/javascript">
document.getElementById("map").addEventListener("mouseup", function(e) {
alert("map mouseup")
}, false)
</script>
</html>what result do you expect? What is the error message actually seen?
run the above code and drag 1234 from the list on the right to the gray div, hoping to pop up the pop-up window of "map mouseup".
if it is the compatibility of js, it should have nothing to do with the operating system. It is because I don"t know why this kind of problem arises, and I still expect someone to answer it
.