angular - (click) 只在 Chrome 中工作，在其他人中不工作

Question

我创建了一个 Angular 网络应用，

链接:- http://mohitkyadav.github.io/algos-ngular

现在，当我在 Chrome 中浏览此网站时，一切正常，但在其他浏览器(如 Edge 和 Firefox)中，当我在我的应用程序中单击侧边导航中的元素时，在添加一些 console.log( "hi") 我找到问题了。

在github上看到这一行

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

应该触发一个点击事件。

( typescript )

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

正如这一行所写，事件应该打印在控制台中。它在 Chrome 和 UC 浏览器 PC 中工作正常，但在 Firefox 和 Edge 中不工作。

当我点击侧边导航中的任何项目时，代码将它记录在 chrome 的控制台中，但在 Firefox 中，控制台是空的，没有任何反应。

请帮帮我。可以自己测试打开https://mohitkyadav.github.io/algos-ngular/

同时打开您的 Chrome 控制台和 Firefox 控制台并单击侧边导航项，请给我您宝贵的建议。

Answer 1

好像跟angular没关系。

查看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>

点击子元素将不起作用，因为它嵌套在按钮内。

您可以将点击事件移动到按钮

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

或者使用另一个标签代替按钮

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

另见

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