CODEWITHSUNDEEP
htmlonclick
Xonal
Xonal

Reputation: 1350

Limit selection of onclick event

I have a div, which contains some text and two buttons. I have an onclick attribute on the div, because I want to be able to click anywhere inside of it to activate an event, except for the two buttons. I don't want the event to activate if I hit one of the buttons. I can't seem to figure out where to put the "onclick", though, because it either selects all or not enough. Is there a way to exclude these two buttons from the selection?

My HTML right now is:

<div id="event" class="span8" onclick="preview({{ name.event_id }})">
     <strong>
    {{ name.title|truncatechars:50 }}
     </strong> <br>
    Location: {{ name.location|truncatechars:50 }} <br>
    Start Date: {{ name.start|truncatechars:50 }} <br>
    End Date: {{ name.end|truncatechars:50 }} 
    <a class="page btn btn-primary btn-small" href="/event/{{ name.event_id }}">Event Page</a>
    <button class ="page btn btn-danger btn-small" id="{{ name.event_id }}" href="#" onClick="removeEvent({{ name.event_id }}, {{ user.get_profile.id }})">
     <i id="icon" class="icon-minus-sign icon-white"></i> 
      Remove
    </button>
...
  </div>

Upvotes: 0

Views: 480

Answers (1)

gulima
gulima

Reputation: 137

You can just add a call to stopPropagation in the button onClick attribute, like this:

<button class ="page btn btn-danger btn-small" id="{{ name.event_id }}" href="#" onClick="event.stopPropagation(); removeEvent({{ name.event_id }}, {{ user.get_profile.id }})">

Previously answered here: How to stop event propagation with inline onclick attribute?

Upvotes: 1

Related Questions