CODEWITHSUNDEEP
jqueryinternet-explorersvgonclickclick
gatzkerob
gatzkerob

Reputation: 899

SVG background element stealing focus on click event in Internet Explorer 11

I've set a .click() event on a SVG element. When I click it in Internet Explorer 11, it thinks I'm clicking on a background element. I've tried using z-index but no luck. I'm using this to log which element it thinks I'm trying to click:

$(document).click(function(e){
    console.log(e.target)
})

There's a lot of code involved here so I'll just link to my project in CodePen:

CodePen Project

If you hover your mouse over "F" or "C" on the right side of the temperature, it's supposed to turn white. Once clicked, the temperature should change from Celsius to Fahrenheit. None of these work in stone-aged IE 11..

Works just fine in Chrome and Firefox (no surprise)

My guess is something is stealing focus and preventing the above from working. If you're quick enough, you can get it to work in IE immediately after refreshing the page.

Cheers

Upvotes: 0

Views: 242

Answers (1)

ccprog
ccprog

Reputation: 21821

I have to appologise in advance, because the following is more of a general commentary than an answer. But I think it is worth to caution, because you will run into more problems.

It's not the best choice to use jQuery to manipulate SVG. Point in case:

$('.weather-degfht-indicator').animate({
    cx: cx,
    cy: cy
},500)

In Firefox and IE, this leads to an attempt to change the cx/cy property of a circle element, which is a read-only SVGAnimatedLength. In Firefox, the changeDegFht function seems to go into an endless loop, in IE it might result in an unrecoverable error (havn't tested it).

The writable property would be SVGCircleElement.cx.baseVal, which jQuery doesn't know about.

In Chrome it works, but only incidentally because cx is already implemented as a CSS property (a part of the upcoming SVG 2 spec) and the SVGCircleElement.style.cx property exists and is writable.

All these pitfalls concerning differences between HTML and SVG and SVG implementation quirks are unknown to jQuery, and I expect more things won't work as expected due to these problems, some also in Chrome. (For example, you can't create new elements from the SVG namespace, because jQuery fails to use the .createElementNS() method.)

I seriously consider to advise you to use a SVG-aware framework instead. but then I know it would invalidate a lot of work and might not be a realistic option.

Upvotes: 1

Related Questions