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

Issue #16830356 • Assigned to wptrentri


Dean D.
Apr 9, 2018
This issue is public.
Found in
  • Microsoft Edge
Found in build #
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;">
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;
<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>

function startLink() {
    console.log("got mousedown");
    event.cancelBubble = true;
    event.returnValue = false;
    return false;

function endLink(me, type, pinNum) {
    alert("got mouseup")

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


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Assigned To to “wptsixtri”

      Changed Assigned To to “PointingTriage”

      Changed Assigned To to “wptrentri”

    • Hi, any progress on this? Its a blocking bug on a SaaS application we are about to launch, and will force us to recommend to our users to use Chrome instead of Edge, and we would prefer to support both if possible. If you need help identifying the issue let me know, I can setup a test server to show it happening.

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

    Sign in