Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When the 'a' tag has child elements the hover doesnt always work because of the event.target #153

Open
aamjsadiq opened this issue Jul 10, 2016 · 12 comments

Comments

@aamjsadiq
Copy link

aamjsadiq commented Jul 10, 2016

When i tried something like

<a href="#">
 <i class="fa fa-icon-blah"></i>
<span>Something</span>
</a>

And the icon and the span are block elements the hover doesnt always seems to work.

I figured its because of the event.target check thats been

if(!$parent.hasClass('open') && !$parent.is(event.target)) {

And

if(!$parent.hasClass('open') && !$this.is(event.target) )

By changing these to:

if(!$parent.hasClass('open') && !$.contains($parent[0], $(event.target)[0])) {

And

if(!$parent.hasClass('open') && !$.contains($this[0], $(event.target)[0])) {

Seems to be fixing the issue.

@clemens7haar
Copy link

Thanks for sharing the code! It's working for me! 👍

@revolutionaries
Copy link

This has solved issues for me as well. Thanks for posting your fix.

@CWSpear
Copy link
Collaborator

CWSpear commented Aug 29, 2016

I don't understand... what element do you have that's triggering the hover? I didn't see the attributes to trigger it. I mean, with just that markup, it shouldn't work at all.

@revolutionaries
Copy link

revolutionaries commented Sep 6, 2016

Hi - I assume @aamjsadiq is referring to code within a Nav <li>, I have a similar scenario and his fix solved the intermittent hover issues for me.

@aamjsadiq
Copy link
Author

aamjsadiq commented Sep 6, 2016

Hi @CWSpear ,

Sorry for posting a dummy code.

The Actual code looks somewhat similar to below.

<a href="#" data-toggle="dropdown" data-delay="10" data-hover="dropdown" data-close-others="true" class="main">
  <span class="icon-home"></span>
   Text For Link 
</a>

The issue happens when your mouse hover target is actually the span , as per existing code it checks whether the target is <a> , but the fix checks for any child elements inside the<a> as well.

@joshudev
Copy link

+1

@GhostLtd
Copy link

GhostLtd commented Feb 6, 2017

We also needed this tweak, thanks!

@orion3dgames
Copy link

Exactly same issue, and this worked fine. Thanks.

@R-G-B
Copy link

R-G-B commented Apr 25, 2017

+1
it has to be in the main branch

@holtkamp
Copy link

holtkamp commented May 5, 2017

@aamjsadiq can you provide a PR for this making it easier for @CWSpear to adopt it?

@mathisvester
Copy link

@aamjsadiq thank you for this patch.

Why is this issue still open?

@holtkamp
Copy link

I guess a Pull Request would make it easier for the maintainer to merge...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants