Separating “click on text” and “click on background” events within same div in jQuery

<>

This question already has an answer here:

Answers


You're referring to the css cursor property.

If the cursor changes, it's because the mouse is over elements that have a different cursor value, which means (of course) each element can be targetted separately in terms of click events.

For this particular case, wrap your text in spans and you'll achieve what you're after:

<div> <span>long text here</span> <br> <span>short one</span> <div>

Since you've got jQuery tagged you may choose to bind your event handlers like so:

$('span').click(function(event)
{
   alert('span clicked');
   event.stopPropagation();
});

$('div').click(function(event)
{
   alert('div clicked');
});

Few things to note:

http://api.jquery.com/event.stoppropagation/ Stop propagation is a way of stopping your events 'bubbling up'. The span is inside the div so, technically, if your span has been clicked - so has your div. You want to stop it at the span click event handler, thus I've called stopPropagation() on the span click handler.

Note also I'm selecting based on div and span, this will select all divs, and all spans. You'll want to refine this for your code.


Need Your Help

Python Tkinter Help Menu

python menu tkinter

I have a paragraph of help information that I would like to display in a window with an "ok" button at the bottom. My issue is formatting...I want to be able to simply set the paragraph equal to a

Converting a float in chars to float (PYTHON)

python floating-point byte valueconverter

I have a program in python in which I want to receive a frame with some values. This values are sent by a xbee.