<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")<br>
[x] bug report<br>
[ ] feature request<br>
[ ] support request</p>
<p dir="auto"><strong>Current behavior</strong></p>

<p dir="auto">Define property named "click" as an <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/output/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/output">@output</a>().<br>
`@Output()<br>
public click: EventEmitter = new EventEmitter();</p>
<p dir="auto">public foo(item){<br>
this.click.emit(item);<br>
}<code class="notranslate">use the component and bind the click property to handler</code>&lt;myComponent (click) = "myClickHandler($event)"/&gt;`</p>
<p dir="auto">When you debug all works fine.<br>
When you work without debugging for some reason the  DOM/JS click event is emitting.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">Override the DOM/JS click event and emit only the custom click.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="http://plnkr.co/edit/vaKukOWH55Q8RTB4nZQD" rel="nofollow">http://plnkr.co/edit/vaKukOWH55Q8RTB4nZQD</a><br>
The plunker doesnt run.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">I want that the one that going to use my component will use it intuitively.</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.4.4</li>
</ul>

<ul dir="auto">
<li>
<p dir="auto"><strong>Browser:</strong> Chrome 46</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> TypeScript</p>
</li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Component({
  selector: 'my-component'
  events: ['change']
})
@View({
  template: '&lt;input (change)=&quot;...&quot;&gt;'
})
class MyComponent {
} "><pre class="notranslate"><code class="notranslate">@Component({
  selector: 'my-component'
  events: ['change']
})
@View({
  template: '&lt;input (change)="..."&gt;'
})
class MyComponent {
} 
</code></pre></div>
<p dir="auto">The above code creates an issue. It conflates the <code class="notranslate">change</code> event from the <code class="notranslate">MyComponent</code> with the bubbling <code class="notranslate">change</code> event from the <code class="notranslate">&lt;input&gt;</code>.</p>
<p dir="auto">The correct behavior is that the <code class="notranslate">change</code> event which is part of the components should filter out the DOM <code class="notranslate">change</code> events. Otherwise</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;my-component (change)=&quot;doSomething($event)&quot;&gt;"><pre class="notranslate"><code class="notranslate">&lt;my-component (change)="doSomething($event)"&gt;
</code></pre></div>
<p dir="auto">will sometimes get the <code class="notranslate">$event</code> from the <code class="notranslate">MyComponent</code> and sometimes from the <code class="notranslate">input</code> event.</p>