title: Chrome doesn't fire click event for SVG element (Firefox does)
body: <p>I observe inconsistency/bug in handling <em>click</em> event among various browsers (Chrome, Edge, Firefox).</p>
  
  <p>In my JavaScript library that uses SVG I create clickable and draggable rectangles. When I run my snippet in Chrome browser the <em>click</em> event is not firing if 2 or more elements are present on canvas.</p>
  
  <p>To check this you need to create at least 2 rectangles on canvas. You can drag them with mouse (Rectangles initial position is the same). Normally rectangle's border become brown if <em>click</em> event was fired on element.</p>
  
  <p>The strange things is that Firefox fires <em>click</em> event as expected but Chrome doesn't fire the event at all. MS Edge browser fires <em>click</em> event on <em>double-click</em>.</p>
  
  <p>P.S: The code is presented here in full capacity so you can run the example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>"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 &gt;= 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 &lt; 0) {
          targetEl.setAttributeNS(null, "x", 0);
      } else if (newX &gt; canvClientRect.width - shapeWidth) {
          targetEl.setAttributeNS(null, "x", canvClientRect.width - shapeWidth);
      } else {
          targetEl.setAttributeNS(null, "x", newX);
      }
  
      if (newY &lt; 0) {
          targetEl.setAttributeNS(null, "y", 0);
      } else if (newY &gt; 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");
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#workCanv {
      width: 100%;
      height: 180px;
      border: 1px solid black;
  }
  
  .draggable {
      cursor: move;
  }
  
  .rect {
      stroke-width: 4;
      fill: lightgrey;
  }
  
  .active {
      stroke: brown
  }
  
  .inactive {
      stroke: black
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="wcstyle.css"&gt;
      &lt;script src="wccontroller.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="initScript()"&gt;
  
  &lt;div id="panel"&gt;
      &lt;button type="button" name="addRectagble" onclick="createRect()"&gt;Add rectangle&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div id="workCanv"&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" id="playSVGCanvas"&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>