Question

<button id="emailbtn" class="cen-inline-block w3-button cen-bg-color-fade-min cen-padding-small w3-small cen-margin-left-small cen-align-top cen-round-top-right cen-hover-text-white-fade aim-trigger aim-datafill"  style="width:30px;height:30px"><i class="fa fa-chevron-right"></i></button>

//Note Assign function is called when DOM loads completely
function Assign(){
var element = document.getElementById('emailbtn');
//if addEventListiner is supported by the browser
        if (element.addEventListener) {
            
               element.addEventListener("click", rhandler,false);
              
           }
           //if attachEvent is supported
           else if (element.attachEvent) {
               element.attachEvent('onclick', rhandler);
           }
           else {
               //add to the element DOM property
               element['onclick'] = rhandler;
           }
}

我正在尝试使用addEventListener为按钮的click事件分配一个事件处理程序。单击该按钮时，它将触发指定的事件处理程序。但是当点击任何按钮子元素（字体真棒图标）时，事件处理程序不会在chrome上触发（没有任何反应）。

如果在Chrome浏览器中点击按钮的任何部分或子元素，我需要有关如何使事件处理程序触发的任何帮助。

Answer 1

能够发现问题的来源。它来自事件监听器功能 rhandler 。

listner使用目标元素的属性（按钮元素），我使用 e.target 从事件中获取元素。

在chrome e.target中表示单击的元素（可以是子元素）。将 e.target 更改为 e.currentTarget 即可。

Answer 2

尝试这种方式而不是addEventListener

DaoAuthenticationProvider

也许失败的原因是你的浏览器版本已经过时了，正如本文所述：

然而，addEventListener（）函数，尽管它是标准的，只是在旧浏览器中不起作用

https://www.simonewebdesign.it/onclick-vs-addeventlistener/

单击子元素时未触发的html按钮的事件处理程序

2 个答案: