this.dataset.X返回MouseEvent对象

debugcn 发表于 Dev

David Yue

我遇到了一个非常奇怪的问题。

我正在尝试创建一个带有带有许多不同搜索类别的下拉按钮的搜索栏。下拉列表中的每个链接都具有相同的id属性，每个属性都具有特定的唯一性category attribute。

在我的Javascript中，我使用该querySelectorAll函数遍历所有元素并附加了click事件侦听器，该事件将使用一个参数（参数）：category属性值执行搜索功能。

但是，当将值传递到函数中时，我将其[object MouseEvent]作为输出。这很奇怪，因为在alert调用该函数之前立即调用的函数会输出正确的值。我不太确定哪里出了问题

HTML代码：

 <ul class="dropdown-menu dropdown-menu-right">
     <li><a class="dropdown-item" id="search-users-btn" data-category="name" href="#">By First Name</a></li>
    <li><a class="dropdown-item" id="search-users-btn" data-category="level" href="#">By Rank</a></li>
     <li><a class="dropdown-item" id="search-users-btn" data-category="id" href="#">By ID</a></li>
 </ul>

JavaScript代码：

var searchBtn = document.querySelectorAll("[id=search-users-btn]");
for (var i = 0; i < searchBtn.length; i++) {
    searchBtn[i].addEventListener("click", function (e) {            
        e.preventDefault();
        e.stopPropagation();

        alert(this.dataset.category); // This outputs the correct value.

        searchQuery(this.dataset.category);//Everything goes wrong here
        return false;
    })
}

function searchQuery(param) {
    var query = _("search-users-query-box");
    if (!DN.value.empty(query.value)) {
        window.location.href = encodeURI("/index/admin/search/param=" + param + "_" + query.value);

//Output looks like this: "/index/admin/search/param=[object%20MouseEvent]_somevaluehere"

    } else {
        query.style.borderColor = "red";
    }
}

来宾271314

尝试将选择器调整为className document.querySelectorAll(".search-users-btn"); 删除重复id在s search-users-btn，代以增加search-users-btn如className在a元件

html

<ul class="dropdown-menu dropdown-menu-right">
  <li><a class="dropdown-item search-users-btn" data-category="name" href="#">By First Name</a></li>
  <li><a class="dropdown-item search-users-btn" data-category="level" href="#">By Rank</a></li>
  <li><a class="dropdown-item search-users-btn" data-category="id" href="#">By ID</a></li>
</ul>

var searchBtn = document.querySelectorAll(".search-users-btn");
for (var i = 0; i < searchBtn.length; i++) {
  searchBtn[i].addEventListener("click", function(e) {
    e.preventDefault();
    e.stopPropagation();

    alert(e.target.dataset.category); // This outputs the correct value.

    searchQuery(e.target.dataset.category); //Everything goes wrong here
  })
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。