Question

我发现在各种浏览器（Chrome，Edge，Firefox）中处理点击事件时出现不一致/错误。

在我使用SVG的JavaScript库中，我创建了可点击和可拖动的矩形。当我在Chrome浏览器中运行我的代码段时，如果画布上有2个或更多元素，则单击事件不会触发。

要检查这一点，您需要在画布上创建至少2个矩形。您可以用鼠标拖动它们（矩形初始位置是相同的）。通常，如果在元素上触发单击事件，矩形的边框将变为棕色。

奇怪的是，Firefox会按预期触发点击事件，但Chrome根本不会触发事件。 MS Edge浏览器在双击上触发单击事件。

P.S：这里以完整的容量显示代码，因此您可以运行示例：

"use strict";
var SVGCanvas = undefined;
var canvClientRect = {};

function initScript() {
    SVGCanvas = document.getElementById("playSVGCanvas");
    canvClientRect.width = SVGCanvas.getClientRects()[0].width;
    canvClientRect.height = SVGCanvas.getClientRects()[0].height;
}

function createRect() {
    var newRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

    var rectX0 = 20;
    var rectY0 = 20;
    var rectWidth = 100;
    var rectHeight = 50;

    newRect.setAttributeNS(null, "x", rectX0);
    newRect.setAttributeNS(null, "y", rectY0);
    newRect.setAttributeNS(null, "width", rectWidth);
    newRect.setAttributeNS(null, "height", rectHeight);
    newRect.setAttributeNS(null, "class", "draggable rect inactive");
    newRect.setAttributeNS(null, "onmousedown", "selectElement(evt)");
    newRect.setAttributeNS(null, "onclick", "clickHandler(evt)");
    SVGCanvas.appendChild(newRect);
}

var currentX = 0;
var currentY = 0;
var shapeWidth = undefined;
var shapeHeight = undefined;

var wasMoved = false;


function selectElement(evt) {
    evt.preventDefault();
    var targetEl = evt.target;
    currentX = evt.clientX;
    currentY = evt.clientY;
    shapeWidth = targetEl.getAttributeNS(null, "width");
    shapeHeight = targetEl.getAttributeNS(null, "height");

    if (SVGCanvas.childElementCount >= 2) {
        // change element's order to show selected item on the top
        SVGCanvas.appendChild(targetEl);
    }

    targetEl.setAttributeNS(null, "onmousemove", "moveElement(evt)");
    targetEl.setAttributeNS(null, "onmouseout", "deselectElement(evt)");
    targetEl.setAttributeNS(null, "onmouseup", "deselectElement(evt)");

    wasMoved = false;
}

function moveElement(evt) {
    evt.preventDefault();
    var targetEl = evt.target;

    var dx = evt.clientX - currentX;
    var dy = evt.clientY - currentY;
    currentX = evt.clientX;
    currentY = evt.clientY;
    var newX = parseInt(targetEl.getAttributeNS(null, "x")) + dx;
    var newY = parseInt(targetEl.getAttributeNS(null, "y")) + dy;

    if(newX < 0) {
        targetEl.setAttributeNS(null, "x", 0);
    } else if (newX > canvClientRect.width - shapeWidth) {
        targetEl.setAttributeNS(null, "x", canvClientRect.width - shapeWidth);
    } else {
        targetEl.setAttributeNS(null, "x", newX);
    }

    if (newY < 0) {
        targetEl.setAttributeNS(null, "y", 0);
    } else if (newY > canvClientRect.height - shapeHeight) {
        targetEl.setAttributeNS(null, "y", canvClientRect.height - shapeHeight);
    } else {
        targetEl.setAttributeNS(null, "y", newY);
    }

    wasMoved = true;
}

function deselectElement(evt) {
    if (evt == null) {
        console.log("Event == null");
        return;
    }
    evt.target.removeAttributeNS(null, "onmousemove");
    evt.target.removeAttributeNS(null, "onmouseout");
    evt.target.removeAttributeNS(null, "onmouseup");
}

function clickHandler(evt) {
    // click event fires even element was moved
    // we don't handle click if element was moved
    if (wasMoved) { return; }

    var targetEl = evt.target;
    if (targetEl.classList.contains("active")) {
        deActivateElm(targetEl);
    } else {
        activateElm(targetEl);
    }
}

function activateElm(elm) {
    elm.classList.remove("inactive");
    elm.classList.add("active");
}

function deActivateElm(elm) {
    elm.classList.remove("active");
    elm.classList.add("inactive");
}

#workCanv {
    width: 100%;
    height: 180px;
    border: 1px solid black;
}

.draggable {
    cursor: move;
}

.rect {
    stroke-width: 4;
    fill: lightgrey;
}

.active {
    stroke: brown
}

.inactive {
    stroke: black
}

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="wcstyle.css">
    <script src="wccontroller.js"></script>
</head>

<body onload="initScript()">

<div id="panel">
    <button type="button" name="addRectagble" onclick="createRect()">Add rectangle</button>
</div>

<div id="workCanv">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" id="playSVGCanvas">
    </svg>
</div>
</body>

Answer 1

过了一段时间后，我向Chrome开发团队报告了这个问题，因为我认为这是一个错误。但事实并非如此。 W3委员会尚未定义从文档树中删除元素然后在mouseup之前添加回来（例如appendChild（lastChild））的情况的行为。因此，结果因浏览器而异。

可以通过以下链接跟踪问题的进展情况：

Chrome不会触发SVG元素的点击事件（Firefox会）

1 个答案: