如何通过JS事件监听器触发toggleVariantList函数（替代onClick）

问题 #

我有一个控制下拉菜单显示的toggleVariantList函数，能不能不用onclick属性，改用JavaScript事件监听器来触发它？以下是基于PHP Laravel编写的下拉菜单代码：

<div class="variant-checker__button" onclick="toggleVariantList(this)">
    <div class="default-item-wrap">
      <span class="default-item">
         {{ $Product->variants->where('stock_status', 1)->first()->attribute_values[0]->varchar ?? $Product->attribute('volume')->first()->valuesToHuman() }}
      </span>
      <svg class="ic icon-arrow-down">
           <use xlink:href="#icon-arrow-down"></use>
       </svg>
       </div>
  </div>

  <div class="variant-checker-buttons-list">
  @foreach($Product->variants as $variant)
     @if($variant->image && $variant->stock_status === 1)
      <button class="list-item button-item" onclick="changeVariant(this)" data-value="{{ $variant->id }}" product-name="{{ $variant->title }}" data-price="{{ $variant->price }}" data-image="http://onelove.ua/storage/{{ $variant->image->path }}">
        {{ $variant->attribute_values[0]->varchar }}
      </button>
    @endif
    @endforeach
</div>
@push('script')
<script>
        
    function toggleVariantList(button) {
        var $container = $(button).closest('.variant-checker');
        $container.find('.variant-checker-buttons-list').toggleClass('active');
    }
</script>
@endpush

解决方案 #

完全可以，用JavaScript事件监听器（你代码里已经用了jQuery，直接用它的事件绑定方法就行）不仅能实现和onclick属性一样的效果，还能让HTML结构更干净，把交互逻辑和视图结构分开，后续维护也更方便。具体改造分两步：

1. 移除HTML中的onclick属性 #

先把按钮上的onclick属性删掉，让HTML只负责结构：

<div class="variant-checker__button">
    <div class="default-item-wrap">
      <span class="default-item">
         {{ $Product->variants->where('stock_status', 1)->first()->attribute_values[0]->varchar ?? $Product->attribute('volume')->first()->valuesToHuman() }}
      </span>
      <svg class="ic icon-arrow-down">
           <use xlink:href="#icon-arrow-down"></use>
       </svg>
       </div>
  </div>

  <div class="variant-checker-buttons-list">
  @foreach($Product->variants as $variant)
     @if($variant->image && $variant->stock_status === 1)
      <button class="list-item button-item" data-value="{{ $variant->id }}" product-name="{{ $variant->title }}" data-price="{{ $variant->price }}" data-image="http://onelove.ua/storage/{{ $variant->image->path }}">
        {{ $variant->attribute_values[0]->varchar }}
      </button>
    @endif
    @endforeach
</div>

2. 修改JavaScript代码，添加事件监听器 #

在@push('script')里的脚本中，用事件委托的方式绑定点击事件，这样即使后续动态生成元素也能正常触发：

@push('script')
<script>
    $(document).ready(function() {
        // 绑定下拉菜单触发按钮的点击事件
        $(document).on('click', '.variant-checker__button', function() {
            var $container = $(this).closest('.variant-checker');
            $container.find('.variant-checker-buttons-list').toggleClass('active');
        });

        // 同理，变体选项的点击事件也可以用监听器实现
        $(document).on('click', '.list-item.button-item', function() {
            // 这里可以直接把原changeVariant的逻辑移过来，或者继续调用原函数
            changeVariant(this);
        });
    });

    // 保留原toggleVariantList函数（如果还有其他地方需要调用），也可以直接把逻辑写在监听器里
    function toggleVariantList(button) {
        var $container = $(button).closest('.variant-checker');
        $container.find('.variant-checker-buttons-list').toggleClass('active');
    }

    // 原changeVariant函数示例（根据你的实际逻辑调整）
    function changeVariant(button) {
        var variantId = $(button).data('value');
        var productName = $(button).attr('product-name');
        var price = $(button).data('price');
        var imageUrl = $(button).data('image');
        // 这里写切换变体的逻辑，比如更新商品信息、图片等
    }
</script>
@endpush

优势说明 #

• 关注点分离：HTML只负责展示结构，JavaScript处理交互逻辑，代码职责更清晰。
• 适配动态元素：事件委托可以自动绑定后续动态生成的变体按钮，不用重复写绑定逻辑。
• 调试更方便：所有交互逻辑集中在脚本里，排查问题时不用在HTML和JS之间来回切换。

内容的提问来源于stack exchange，提问作者Itra