Limit selection of onclick event

Question

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>

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

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?

edited May 23 '17 at 11:56

Community

1
1

answered Jun 24 '13 at 17:17

gulima

139
2
11

Thanks a lot. Sorry, I wasn't sure what to search for. Didn't know that propagation was the term I was looking for. – Xonal Jun 24 '13 at 17:57

Limit selection of onclick event

1 Answers1