问题
I have been using Twitter's Bootstrap Tooltip plugin. This works perfectly fine except that when used on svg
elements, it breaks. After some debugging, I narrowed down the problem. In the js
file, the init
function looks like this:
, init: function (type, element, options) {
var eventIn
, eventOut
...
if (this.options.trigger != 'manual') {
eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this))
this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this))
}
...
}
I remembered there were numerous issues with SVG-IE 9.0 specific implementation so I made the following modifications:
if (this.options.trigger != 'manual') {
eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
var flag = $.browser.msie && parseInt($.browser.version, 10) === 9
eventIn = flag ? "mouseover" : eventIn
eventOut = flag ? "mouseout" : eventOut
this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this))
this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this))
}
And this works fine in all browsers. After some searching, I found that someone else faced the same problem. I am not sure if there is a better way of fixing this bug especially after reading the argument in the link.
In IE9, there is a native contains() implementation on the document, so jQuery uses it. The problem is that this contains() implementation does not extend to SVG elements.
Any suggestions on whether my fix can be improved?
回答1:
Well, I might have some suggestions but the best thing is to go on the bootstrap github and do a pull request and @fat and @mdo will certainly take a look at it before merging your code in and even give you feedback. Cheers!
来源:https://stackoverflow.com/questions/11147830/can-someone-comment-on-my-bug-fix