HTML prevents click event on an inner div

Question

I tried to use an event listener with HTML:

<div style="width: 200px;height: 200px" id="outerDiv" onClick="alert(1)">
    <div id="innerDiv" style="width: 200px;height: 200px">no click</div>
</div>

How do I make it so that clicking in a div (id=innerDiv) doesn't alert 1? I want it so that clicking only the outer div gives an alert.

Consider adding 'css' and 'javascript' tags. – Krii Dec 08 '15 at 16:07 — Krii, Dec 08 '15 at 16:07

score 3 · Accepted Answer · edited May 23 '17 at 10:30

3

You can prevent propagation like this on the innerDiv so it will only fire for the outerDiv:

 onClick="event.stopPropagation()"

Also see How to stop event propagation with inline onclick attribute?

edited May 23 '17 at 10:30

Community

1
1

answered Dec 08 '15 at 16:13

sourcx

944
7
22

I believe OP wants only the `outerDiv` to `alert(1)`, not the `innerDiv` – camelCase Dec 08 '15 at 16:22
I think putting `onClick="alert(1)"` on the `outerDiv` and `onClick="event.stopPropagation()"` on the `innerDiv` will do so. – sourcx Dec 08 '15 at 16:57
1

I believe it will but your wording says _so it will not fire for the `outerDiv`_ but this is what the OP wants. [Your code is correct](http://jsfiddle.net/8qb0nzco/), but I think the wording is not. – camelCase Dec 08 '15 at 17:04

HTML prevents click event on an inner div

1 Answers1