笔记本触控板轻触时下拉列表li的onclick事件不触发求助

触控板轻触在部分浏览器或系统环境中，触发的事件逻辑和鼠标左键点击存在差异——有些轻触操作会优先触发touch系列事件，而如果元素仅绑定了click事件，就可能出现不响应的情况。另外，你当前用字符串拼接HTML并绑定inline onclick的方式，不仅容易出现转义错误，也不利于事件的统一处理。

解决方案 #

1. 使用统一指针事件（推荐） #

W3C标准的pointerclick事件可以统一处理鼠标、触控板轻触、触摸屏、触控笔等所有输入设备的点击操作，无需区分设备类型。

2. 重构代码，使用事件委托 #

避免inline事件绑定，改用jQuery的事件委托，同时用数据属性存储参数，让代码更健壮。

修改后的代码示例 #

第一步：生成HTML时移除inline onclick，改用数据属性

for (var i = 0; i < accountListData.length; i++) {
    const account = accountListData[i];
    const matchCondition = account['ACCOUNTCODE'].toUpperCase().trim().includes(txt.toUpperCase().trim()) || 
                           account['ACCOUNTNAME'].toUpperCase().trim().includes(txt.toUpperCase().trim());
    
    if (matchCondition) {
        // 整理需要的参数
        const useRates = account['UseRatesFromAccount'].trim();
        const accountName = account['ACCOUNTNAME'].replaceAll("'", "").trim();
        const subAccounts = account['subAccounts'];
        const accountCode = account['ACCOUNTCODE'];
        
        // 构建li元素HTML，用data-*属性存储参数
        let liHtml = `<li class="account-quick-search-item" 
                          data-use-rates="${useRates}" 
                          data-account-name="${accountName}" 
                          data-sub-accounts="${subAccounts}" 
                          data-account-code="${accountCode}">
                        <div style="font-size: 11px;font-weight: bolder;">${accountCode}</div>
                        <div style="margin-left: 6px; margin-top: 2px;">${accountName}</div>`;
        
        if (subAccounts === "1") {
            liHtml += '<div class="sub-account-icon"></div></li>';
        } else {
            liHtml += '</li>';
        }
        
        s += liHtml;
        
        if (i !== accountListData.length - 1) {
            s += '<li class="account-quick-search-divider"></li>';
        }
    }
}
$("#accountsQuickSearch").html(s);

第二步：用事件委托绑定pointerclick事件

// 事件委托，处理动态生成的列表项点击
$("#accountsQuickSearch").on("pointerclick", ".account-quick-search-item", function() {
    const $item = $(this);
    // 从数据属性中获取参数
    const useRates = $item.data('use-rates');
    const accountName = $item.data('account-name');
    const subAccounts = $item.data('sub-accounts');
    const accountCode = $item.data('account-code');
    
    // 调用原selectAccount函数
    selectAccount(this, useRates, accountName, subAccounts, accountCode);
});

兼容旧环境的备选方案 #

如果需要兼容不支持pointer事件的旧浏览器，可以同时绑定click和touchstart事件，并阻止触摸事件的默认行为避免重复触发：

$("#accountsQuickSearch").on("click touchstart", ".account-quick-search-item", function(e) {
    // 阻止触摸事件默认行为，防止部分设备上触发两次事件
    if (e.type === 'touchstart') {
        e.preventDefault();
    }
    
    const $item = $(this);
    const useRates = $item.data('use-rates');
    const accountName = $item.data('account-name');
    const subAccounts = $item.data('sub-accounts');
    const accountCode = $item.data('account-code');
    
    selectAccount(this, useRates, accountName, subAccounts, accountCode);
});

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