Question

我想将一个元素移动到＆＃34; top＆＃34;当它被点击时。但是，如果我在mousedown处理程序中移动元素（使其成为其父级的最后一个子级），则永远不会调用click事件处理程序，尽管mouseup事件处理程序是。这个丢失的click事件发生在Chrome上，但不会发生在Firefox上。

如果我不移动mousedown处理程序中的元素，那么Chrome会像Firefox一样调用click处理程序。

我需要调用click事件。 我的问题是我可以做一些不同的事情，继续移动mousedown上的元素并在click之后获取mouseup事件吗？这是Chrome错误还是灰色区域，因为元素上的事件被定义为由规范处理（我不确定这里适用的规范）。

（实际上我想在拖动的同时将其移动到顶部并在之后将其移回，但是这个问题可以通过鼠标和mousedown以更简单的方式说明。）

我遇到了这种操纵svg的形状，这就是我构建我的例子的方式。

当您点击以下示例显示的左上角时，您在控制台中看到的是：

Chrome控制台输出：

circle1 MouseDown event handler called
circle1 MouseUp event handler called

Firefox控制台输出：

"circle1 MouseDown event handler called" clicked_event_test.xhtml:31:8
"circle1 MouseUp event handler called" clicked_event_test.xhtml:38:8
"circle1 Click event handler called" clicked_event_test.xhtml:43:8

请注意，点击处理程序是由Firefox调用的，而不是由Chrome调用的。

示例代码：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>clicked event test</title>
</head>
<body>
<div style="background-color:#eee; width:300px; height:200px;">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" preserveAspectRatio="xMinYMin meet" style="max-width: 300px; max-height: 200px;">
        <g fill="blue" stroke="red">
            <g id="circle1" class="sketch-shape draggable" transform="translate(10,10)">
                <circle fill="orange" opacity="0.8" stroke-width="1px" cx="30" cy="30" r="30"></circle>
            </g>
            <g id="polygon1" class="sketch-shape draggable" transform="translate(20,20)">
                <polygon stroke-width="1px" points="0,85 0,50 132,0 264,50 264,85 222,155 42,155"></polygon>
            </g>
            <g id="circle2" class="sketch-shape draggable" transform="translate(230,130)">
                <circle fill="yellow" opacity="0.8" stroke-width="1px" cx="30" cy="30" r="30"></circle>
            </g>
        </g>
    </svg>
</div>

<script>
//<![CDATA[

    var handleMouseDown = function handleMouseDown(name, event)
    {
        window.console.log(name +' MouseDown event handler called');
        var elem = event.currentTarget;
        elem.parentNode.appendChild(elem);
    };

    var handleMouseUp = function handleMouseUp(name, event)
    {
        window.console.log(name + ' MouseUp event handler called');
    };

    var handleClick = function handleClick(name, event)
    {
        window.console.log(name + ' Click event handler called');
    };

    var handleDoubleClick = function handleDoubleClick(name, event)
    {
        window.console.log(name + ' DoubleClick event handler called');
    };

    var attachHandlers = function attachHandlers(name, element)
    {
        element.onmousedown = handleMouseDown.bind(element, name);
        element.onmouseup = handleMouseUp.bind(element, name);
        element.onclick = handleClick.bind(element, name);
        element.ondblclick = handleDoubleClick.bind(element, name);
    };

    [ 'circle1', 'circle2', 'polygon1' ]
        .forEach(function (name)
            {
                var element = document.getElementById(name);
                attachHandlers(name, element);
            });
//]]>
</script>

</body>
</html>

在Chrome中，在处理其mousedown事件时移动元素会阻止点击事件触发

0 个答案: