CSS & Mouse events don't fire when dragging the mouse from a HTML Object in Edge

Issue #16830356 • Assigned to wptsixtri

Details

Author
Dean D.
Created
Apr 9, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
17.17133
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

There is an inconsistency in how Edge handles mouse drag events inside objects that I’m finding problematic to work around.

I have an application that uses a mouse drag paradigm to create a SVG path between two HTML objects by mousedown on an element in one of the objects and dragging the mouse to the other object and releasing the mouse which should fire a mouseup event in the second object. In IE and Firefox, this works as expected and the event fires on the second object. In Chrome it only works if you cancel the mouse event bubbling. However in Edge when you mousedown when on the object and drag you won’t get any events (CSS or mouse) on anything when you drag the mouse out of the first object.

I have turned off all the CSS selection options (so that the browser doesn’t think the dragging is selecting text), HTML5 drag options are disabled plus all the various ways to stop event bubbling but nothing works. I suspect this is an Edge bug as I have spent a long time investigating different options.

Here is the body section of the HTML test harness:

<object draggable="false" data="obj.html" height="100" width="100" style="   user-select: none; -ms-user-select: none"></object>
<object draggable="false" data="obj.html" height="100" width="100" style="   user-select: none; -ms-user-select: none"></object>

Here is the body of the object HTML:

<body id="body" ondragstart="return false;" ondrop="return false;">
<style>
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.grey {
    border: 2px solid #999;
    background-color: #e3e3e3;
    color: #999;
}

.grey:hover {
    cursor: crosshair
}

.green {
    border: 2px solid #b6c9a6;
    background-color: #dff0d8;
    color: #468847;
}
</style>
<div id="group">
<div id="widget" style="   width: 100px; height: 100px; text-align: center;">
    <div class="green" style="   height: 60px; width: 60px; border-radius: 3px 3px 3px 3px; transform: rotate(45deg)"></div>
    <div id="header" style=" width: 90px; height: 90px; display:flex; align-items: center; justify-content: center; color: #468847"><b>Obj</b></div>
    <div id="inPin0" class="grey" onmousedown="startLink()" onmouseup="endLink()" style="   border-radius: 1px; width:6px; height:6px"></div>
</div>
</div>

<script>
function startLink() {
    console.log("got mousedown");
    event.cancelBubble = true;
    event.stopPropagation()
    event.preventDefault();
    event.returnValue = false;
    return false;
}

function endLink(me, type, pinNum) {
    alert("got mouseup")
}
</script>
</body>

Unfortunately I can’t work out how to load object files in codepen/jsfiddle to show this working but I have setup a temporary web site that demonstrates this problem at temporary webserver

Move your mouse over the pins in the green triangle and you can see the CSS change the cursor. Mousedown on the top object pin and drag the mouse to the pin on the second object triangle, you won’t get a reaction. Try with the DIVs lower down on the screen, you can drag the mouse from the DIV pins to another div pin as well as the object pins, and you get an alert from the mouseup event (or the cursor changes over the pin at the edge of the triangle).

This is a problem because it means event listeners & CSS selectors won’t be triggered, and the mousedown and drag is needed to build a drag/drop web solution. This bug was confirmed by Brando Zhang at the Microsoft Community site. here

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Assigned To to “wptsixtri”

    You need to sign in to your Microsoft account to add a comment.

    Sign in