Javascript HTML元素列表上的事件侦听器

我在DOM中有多个元素具有相同的类名--“ps_uurail-y”。我想迭代这些元素，并用类在单个元素上侦听click事件，然后停止事件传播。我尝试过下面的方法，但不知何故它不起作用

onClickScrollBar(){
    let elements : Array<any> = this._elRef.nativeElement.querySelectorAll('.ps__rail-y');
    elements.forEach((index : number) => {
      let element = document.getElementsByClassName('ps__rail-y')[index] as HTMLElement;
      element.addEventListener('click', (e : Event) => {
        e.stopPropagation()
      }, true)
    })
  }

首先

实际上，最好的做法是利用事件委派，在所有可能触发事件的元素的祖先上只设置一个事件处理程序，并让事件冒泡到该祖先。然后，当在祖先处理它时，您可以引用event.target，它将引用启动事件的实际元素。这样，您只设置一个处理程序，而不是多个，并且不进行任何循环

下面是一个例子：

//在祖先处设置处理程序 document.queryselector节.addEventListener单击，函数事件{ //仅当触发事件的实际元素 //有一定的等级 ifevent.target.classList.containsfoo{ console.log您单击了+event.target.nodeName+元素。； } }; 点击我 点击我 点击我点击我 单击我

首先

实际上，最好的做法是利用事件委派，在所有可能触发事件的元素的祖先上只设置一个事件处理程序，并让事件冒泡到该祖先。然后，当在祖先处理它时，您可以引用event.target，它将引用启动事件的实际元素。这样，您只设置一个处理程序，而不是多个，并且不进行任何循环

下面是一个例子：

//在祖先处设置处理程序 document.queryselector节.addEventListener单击，函数事件{ //仅当触发事件的实际元素 //有一定的等级 ifevent.target.classList.containsfoo{ console.log您单击了+event.target.nodeName+元素。； } }; 点击我 点击我 点击我点击我 单击我

---

感谢您的回复，我已经尝试过这种方法，它正在发挥作用。您对这种方法有何看法-let elements:Array=this.\u elRef.nativeElement.queryselectoral'.ps_urail-y'；elements.forEachelement:HtmleElement=>{element.addEventListener'click'，e:Event=>{e.StopperPropagation}，true}我不喜欢循环查找多个元素，并且必须让每个存储都有一个相同的处理程序。这只是浪费时间和记忆。首选的方法是我的答案，即找到一个元素并分配一个处理程序。感谢您的回复，我已经尝试了这种方法，它正在工作。您对这种方法有何看法？让elements:Array=this._elRef.nativeElement.querySelectorAll'.ps__rail-y'；elements.forEachelement:HtmleElement=>{element.addEventListener'click'，e:Event=>{e.StopperPropagation}，true}我不喜欢循环查找多个元素，并且必须让每个存储都有一个相同的处理程序。这只是浪费时间和记忆。首选的方法是我的答案，即找到一个元素并分配一个处理程序。