title: d3 mouseover/touchstart not trigger event on mobile
body: <p>I have simple d3 code binding data with circles. An event is fired when mouse hover over the circles. The mouseOver function is also very simple. It just makes tooltip div visible. </p>
  
  <p>It's a client work so I cannot share the full code. But it has the simple structure like below:</p>
  
  <pre><code>function mouseOver() {
          tooltip.style("visibility", "visible")
              .style("top", d3.event.pageY + "px")
              .style("left", d3.event.pageX +"px")
              .html('&lt;p&gt;'+'&lt;/p&gt;')
  
  }
      var circles = g
          .selectAll('.circles')
          .data(data) 
          .join('circle')
          .attr('class', 'circles')
          .attr('cx', d =&gt; x(d))
          .attr('cy', d =&gt; y(d))
          .attr('r', r)
          .attr('fill',  d =&gt; colour(d.type))
          .attr('fill-opacity', 0.6)
          .on('mouseover', mouseOver)
          .on('mouseleave', mouseLeave)
  
      circles.exit().remove()
  </code></pre>
  
  <p>It works well on desktop. But for some reasons, the tooltip doesn't show up on mobile. 
  I changed the 'mouseover' into 'touchstart' in case it's the reason. To capture if the window ontouchstart, I made like this.</p>
  
  <pre><code>    var hover = ('ontouchstart' in window) ? 
          'touchstart click' : 'mouseover';
  </code></pre>
  
  <p>Then, in the selection, I changed as below:</p>
  
  <pre><code>.on(hover, mouseOver) 
  </code></pre>
  
  <p>But it still doesn't trigger the event on mobile. </p>
  
  <p>On a side note, I also have bars(rect) with the same setting as circles above but the mouseover event is trigerred on mobile as well as desktop.</p>
  
  <p>I really have no idea why one event works well on mobile although it's fired by 'mouseover' event handler while the other doesn't work at all despite the same setting as the other. </p>
  
  <p>Does anyone have ideas??</p>