(click) only working in Chrome not working in othe

Question

I've created an Angular web app,

link :- http://mohitkyadav.github.io/algos-ngular

Now when I browse this site in Chrome, everything works fine as expected but in other browsers like Edge and Firefox when I click the elements in side-nav on my app nothing happens, after adding some console.log("hi") I figured out the problem.

see this line on github

https://github.com/mohitkyadav/algos-ngular/blob/master/src/app/views/content.component.html#L7

an click event should be fired.

(typescript)

https://github.com/mohitkyadav/algos-ngular/blob/master/src/app/components/content.component.ts#L34

As written in this line the event should print in the console. It's working fine in Chrome and UC browser PC but not working in Firefox and Edge.

When I click any item from side-nav, the code logs it in console in chrome but in Firefox the console is empty, nothing happens.

Please help me. You can test it your self open https://mohitkyadav.github.io/algos-ngular/

and also open your Chrome console and Firefox console and click side-nav items, please give me your valuable suggestions.

Answer 1

Seems it has nothing to do with angular.

Look at button definition in HTML5 standart

Content model: Phrasing content, but there must be no interactive content descendant.

<button>
  <div (click)="fetchCode()">
    Click me but i won't work in Firefox in IE
  </div>
</button>

Clicking at the children elements won't work because it is nested inside a button.

You can either move click event to button

<button (click)="fetchCode()">
  <div>
    This should work
  </div>
</button>

or use another tag instead of button

<div class="button" >
  <div (click)="fetchCode()">
    This also should work
  </div>
</div>

See also

• Missing click event for <span> inside <button> element on firefox
• Element inside button does not fire click event in Firefox