0

I have a svg area in the middle of the screen, where I move some SVG elements around, by using D3 drag behavior. Below the svg, I have some options, in a div like this:

<div id="gui-options">
    <div onclick="sortCards()">
        <span>Sort cards</span>
    </div>
    ...
</div>

When I have dragged some elements around in the svg, I have to click twice to trigger sortCards(). The first click is not registered. The implementation of sortCards() is not important to this problem.

I have tried to add click handlers after the DOM is ready, but that doesn't make any difference.

I don't have this problem when the drag-functionality is disabled. If I click twice on an option, I only have to click once to toggle the other options. But if I drag some elements two clicks is necessary to "change focus".

Do you have any suggestions where the solution might be hiding?

swenedo
  • 3,074
  • 8
  • 30
  • 49
  • I am aware that this question http://stackoverflow.com/questions/14667401/click-event-not-firing-after-drag-sometimes-in-d3-js?rq=1 is almost about this same problem, but the solution was a ugly hack, so I am looking for a "real" solution here. – swenedo Mar 12 '13 at 14:05
  • Please post a more complete example, incl. some SVG tags and basic (working) JS code. Otherwise it is hard check if your problems are caused by d3, your SVG tags, or something else. You may also consider reading the [SVG pointer-events spec](http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty). Maybe you can mitigate your problems by setting up the pointer-events property for you SVG tags. Also check if the problems occurs in other browsers, maybe your browser still does not fully implement the SVG spec correctly. Good Luck! – Juve Mar 13 '13 at 08:20

0 Answers0