Jquery link only action

Question

I have the following html code:

<a href="/produkt" class="menuTabs">My Catalog 1 <span>(23752)</span></a>

JQuery:

    $('a.menuTabs', '#subNav').mouseover(function (e) {
...

The issue here is that I only want to execute mouseover function when I'm over the words "My Catalog 1" and NOT the "span" selection. thanks

Can you alter the HTML and wrap My Catalog 1 into another element? — DrColossos, Aug 01 '12 at 09:43
This really can't be done reliably without wrapping the text you want the event attached to in it's own element, like a ``. — Hubro, Aug 01 '12 at 09:48

score 2 · Accepted Answer · answered Aug 01 '12 at 09:45

2

Why not just wrapping the text you want to trigger mouseover in an own span?

<a href="/produkt" class="menuTabs"><span class="mouseover">My Catalog 1</span> <span>(23752)</span></a>

$('a.menuTabs span.mouseover', '#subNav').mouseover(function (e) {

answered Aug 01 '12 at 09:45

Robin Drexler

4,307
3
25
28

This is what I would do. Not really necessary to attach a class to the span though, since in this context you can just target the *first* span – Hubro Aug 01 '12 at 09:46
It's not always possible to change layout. However, good fix. – Nikolay Fominyh Aug 01 '12 at 09:46
Of course, it's not always possible to change the layout (e.g. in Chrome extensions), but in most cases it should and he did not mention, that he can't :) – Robin Drexler Aug 01 '12 at 09:48

score 1 · Answer 2 · answered Aug 01 '12 at 09:55

Just check which element is the target of the mouse over

$('a.menuTabs', '#subNav').mouseover(function (e) {
    if (e.target != this){
        $('.disp').text('s');
        return;
    }
    $('.disp').text('a');
});

http://jsfiddle.net/brfLX/

score 0 · Answer 3 · edited May 23 '17 at 10:24

0

Complete solution here:

$('a.menuTabs').mouseover(function (e) {});
$('a.menuTabs > span').mouseover(function (e) {  e.stopPropagation(); });

Question same as this.

edited May 23 '17 at 10:24

Community

1
1

answered Aug 01 '12 at 09:44

Nikolay Fominyh

8,946
8
66
102

Does this actually work? I would think not since the event is bound to the parent – Hubro Aug 01 '12 at 09:47
This is not reliable though, since the parent element can easily wrap around the child element. See for instance if we add a little padding: http://jsfiddle.net/CZBMS/2/ – Hubro Aug 01 '12 at 10:04
Yes, in this case we must change layout like in Robin's answer. – Nikolay Fominyh Aug 01 '12 at 10:08

Jquery link only action

3 Answers3