如何使用querySelector選擇被點擊的元素

<div class="search-input" onclick="getSearch()">
              <input
                oninput="getPorts(value)"
                type="text"
                id="pick"
                name="pick"
                placeholder="Enter Pickup Location"
                required
              />
              <div class="autocom-box">
                <!-- dynamic portsData map box  -->
              </div>
            </div>
 <div class="search-input" onclick="getSearch()">
              <input
                oninput="getPorts(value)"
                type="text"
                id="dest"
                name="dest"
                placeholder="Enter Destination"
                required
              />
              <div class="autocom-box">
                <!-- dynamic portsData map box  -->
              </div>
            </div>

這是Js

let searchWrapper;
let inputBox;
let suggBox;

const getSearch = () => {
  searchWrapper = document.querySelector(".search-input");
  console.log(searchWrapper);
  inputBox = searchWrapper.querySelector("input");
  console.log(inputBox);
  suggBox = searchWrapper.querySelector(".autocom-box");
  console.log(suggBox);
};

我正在嘗試選擇基于單擊的類，因為類名相同（搜索輸入），但在這里無論我單擊哪個 div，它總是被選中第一個。（在 searchWrapper console.log 中，它給出了第一個 div 及其元素）

誰能告訴我我在這里做錯了什么，這樣如果我點擊 2nd div，我就可以獲得 2nd div 及其元素。

uj5u.com熱心網友回復：

給你兩個答案。

使用現代事件處理

我建議您不要使用onxyz-attribute-style 事件處理程式。它們存在多個問題，但可能最重要的兩個問題是：

1. 他們只能呼叫全域函式。
2. 為它們生成的背景關系非常復雜，因此很容易發生沖突（例如，如果您的函式具有 nameremoveChild或appendChildor 在某些情況下submit，您最終不會呼叫您的函式，而是呼叫一個 DOM 元素）。

相反，看看使用addEventListener. 這是一個事件處理程式直接附加到您的div元素的示例：

<div class="search-input">
    <input
        oninput="getPorts(value)"
        type="text"
        id="pick"
        name="pick"
        placeholder="Enter Pickup Location"
        required
    />
    <div class="autocom-box">
        <!-- dynamic portsData map box  -->
    </div>
</div>
<div class="search-input">
    <input
        oninput="getPorts(value)"
        type="text"
        id="dest"
        name="dest"
        placeholder="Enter Destination"
        required
    />
    <div class="autocom-box">
        <!-- dynamic portsData map box  -->
    </div>
</div>

const getSearch = (event) => {
    const searchWrapper = event.currentTarget;
    const inputBox = searchWrapper.querySelector("input");
    const suggBox = searchWrapper.querySelector(".autocom-box");
    // ...
};

for (const element of document.querySelectorAll(".search-input")) {
    element.addEventListener("click", getSearch);
}

我只在div那里做了元素，但你也想做input元素。

您還可以查看委托事件處理。

繼續onclick屬性

如果您真的想繼續使用該onclick屬性，請傳遞this給它：

<div class="search-input" onclick="getSearch(this)">
<!-- ????????????????????????????????????????^^^^  -->

thisonxyz在為-attribute-style 事件處理程式生成的背景關系中是onclick屬性所在的元素（.search-input div在本例中為 ）。

然后，在getSearch中搜索div：

const getSearch = (searchWrapper) => {
    const inputBox = searchWrapper.querySelector("input");
    const suggBox = searchWrapper.querySelector(".autocom-box");
    // ...
};

uj5u.com熱心網友回復：

首先停止使用行內事件監聽器。改為使用addEventListener。為此，請獲取所有搜索輸入包裝器的串列并遍歷該串列，為每一個添加點擊偵聽器。

完成此操作后，處理函式會自動傳遞事件物件，該物件包含currentTarget持有對事件偵聽器系結到的元素的參考的屬性。然后，這允許您使用onquerySelector它而不是document.

要訪問事件物件，您需要在處理函式中定義引數名稱。我event在下面的示例中使用過，但是您可以將其命名為任何您喜歡的名稱。

let searchWrapper;
let inputBox;
let suggBox;

const getSearch = (event) => {
  searchWrapper = event.currentTarget;
  console.log(searchWrapper);
  inputBox = searchWrapper.querySelector("input");
  console.log(inputBox);
  suggBox = searchWrapper.querySelector(".autocom-box");
  console.log(suggBox);
};

for (const searchInput of document.querySelectorAll('.search-input')) {
  searchInput.addEventListener('click', getSearch);
}

<div class="search-input">
  <input type="text" id="pick" name="pick" placeholder="Enter Pickup Location" required />
  <div class="autocom-box">
    1. abc
  </div>
</div>
<div class="search-input">
  <input type="text" id="dest" name="dest" placeholder="Enter Destination" required />
  <div class="autocom-box">
    2. def 
  </div>
</div>

標籤：javascript html

上一篇：無法使用javascript將多個值陣列推入鍵陣列到單個陣列中

下一篇：為什么我的基數排序實作不起作用-JavaScript