JQuery event propagation (return false)

Question

Why clicking on the male radio button does not work?

<div id="m_wrapper">
    <input id="m" type="radio" name="sex" value="male" />Male<br>
</div>
    <input id="f" type="radio" name="sex" value="female" />Female
    <input id="o" type="radio" name="sex" value="other" />Other


$("#m_wrapper").click(function(e){
    $("#m").prop('checked', true); 
    return false;
});

I know that here -> return false is equivalent to call e.preventDefault() AND e.stopPropagation()

However, when I click on the radio button, I have an explicit line setting the property checked to true for the Male radio button. Why will preventDefault() will UNDO something I set?

By the way, clicking anywhere inside 'm_wrapper' checks the radio button. Which makes sense.

I know that removing return false will fix the issue. The question is 'why?'

$("#m_wrapper").click(function(e){
    $("#m").prop('checked', true); 
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div id="m_wrapper">
    <input id="m" type="radio" name="sex" value="male" />Male<br>
</div>
    <input id="f" type="radio" name="sex" value="female" />Female
    <input id="o" type="radio" name="sex" value="other" />Other

dfsq · Accepted Answer · 2015-05-29 07:41:14Z

9

This is what happens when you click "Male" input button.

Click event on the input makes it checked. Better to say, attempts to make it checked. To actually commit this new state and render it, event must finish its lifecycle without being prevented. However..
Event bubbles up the DOM tree and reaches parent div element which has click handler attached to it. This event handler prevents default behaviour, which in case of radio button (and checkbox) is toggling checked state. Calling e.preventDefault() is the same as return false in this case.
return false instruction dictates that radio input remained unchecked because according to its initial state after click it should have become checked (if default was not prevented). So return false forces radio to remain unchecked even though previous line $("#m").prop('checked', true); got it checked.

edited May 29, 2015 at 7:41

answered May 28, 2015 at 21:40

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cacho Santa Over a year ago

awesome @dfsq. I think I understand now why when click on the 'm_wrapper' the Male radio button gets checked. Because preventDefault( ) for the radio button is never called right?

dfsq Over a year ago

When you click m_wrapper (but not checkbox) this event has nothing to do with checkbox, so you handler sets checked = true. When you click radio button the the same event first tries to check radio however since it's prevented the checked state needs to be reverted to original which it was before click. It doesn't matter that before that other handler checked it already. Radio button state will be reverted to the state it was at the moment click was detected on the radio.

MaxZoom · Accepted Answer · 2015-05-28 21:54:21Z

1

You don't need to return false when m_wrapper is clicked. The return value of an event handler determines whether or not the default browser behavior should take place. In the case of clicking on links, this would be following the link. As there is no default onclick behavior for a div you can skip it entirely.

$("#m_wrapper").click(function(e) {
  $("#m").prop('checked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="m_wrapper">
  <input id="m" type="radio" name="sex" value="male" />Male<br/>
</div>  

<input id="f" type="radio" name="sex" value="female" />Female
<input id="o" type="radio" name="sex" value="other" />Other

edited May 28, 2015 at 21:54

answered May 28, 2015 at 21:30

MaxZoom

7,7635 gold badges30 silver badges45 bronze badges

2 Comments

Cacho Santa Over a year ago

no it doesn't. Click specifically on the radio button circle, it doesn't get checked.

AmmarCSE Over a year ago

This is not an answer

Collectives™ on Stack Overflow

JQuery event propagation (return false)

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related