Uncaught TypeError: Cannot read properties of undefined (reading 'stopPropagation')

Question

stopPropagation() 在我的代码中不起作用。有什么问题？

当您单击按钮时，下拉菜单将切换，我想在用户单击页面上的任意位置时隐藏此切换。

var iconListBoxBody;

function btnCrypto(e) {
  e.stopPropagation();
  iconListBoxBody = document.getElementById("iconListBoxBody");
  iconListBoxBody.classList.toggle("active");
}

document.body.addEventListener("click", function() {
  iconListBoxBody.classList.remove("active");
});

.iconListBoxBody {
  display: none;
}

.iconListBoxBody.active {
  display: block;
}

<div class="iconListBox">
  <div class="iconListBoxHeader">
    <img src="assets/images/coin1.png" alt="">
    <input type="text" class="form-control" value="BTC" />
    <button class="btn-crypto btn btn-primary" onclick="btnCrypto()"><i class="fa fa-chevron-down"></i>click</button>
  </div>
  <div class="iconListBoxBody" id="iconListBoxBody">
    <ul class="iconListBoxBodyList">
      <li>
        <img src="assets/images/coin1.png" alt="">
        <span class="coinText">BTC</span>
      </li>
      <li>
        <img src="assets/images/coin2.png" alt="">
        <span class="coinText">ETH</span>
      </li>
    </ul>
  </div>
</div>

Answer 1

添加了 JavaScript 个事件侦听器。

var iconListBoxBody;

function btnCrypto(e) {
  e.stopPropagation();
  iconListBoxBody = document.getElementById("iconListBoxBody");
  iconListBoxBody.classList.toggle("active");
}

document.body.addEventListener("click", function() {
  iconListBoxBody.classList.remove("active");
});

document.querySelectorAll(".btn-crypto").forEach(el => (el.onclick = btnCrypto))

.iconListBoxBody {
  display: none;
}

.iconListBoxBody.active {
  display: block;
}

<div class="iconListBox">
  <div class="iconListBoxHeader">
    <img src="assets/images/coin1.png" alt="">
    <input type="text" class="form-control" value="BTC" />
    <button class="btn-crypto btn btn-primary">
    <i class="fa fa-chevron-down"></i>click</button>
  </div>
  <div class="iconListBoxBody" id="iconListBoxBody">
    <ul class="iconListBoxBodyList">
      <li>
        <img src="assets/images/coin1.png" alt="">
        <span class="coinText">BTC</span>
      </li>
      <li>
        <img src="assets/images/coin2.png" alt="">
        <span class="coinText">ETH</span>
      </li>


    </ul>
  </div>
</div>

Answer 2

你刚才忘了传event参数，我把onclick="btnCrypto()"改成了onclick="btnCrypto(event)":

var iconListBoxBody;

function btnCrypto(e) {
  e.stopPropagation();
  iconListBoxBody = document.getElementById("iconListBoxBody");
  iconListBoxBody.classList.toggle("active");
}

document.body.addEventListener("click", function() {
  iconListBoxBody.classList.remove("active");
});

.iconListBoxBody {
  display: none;
}

.iconListBoxBody.active {
  display: block;
}

<div class="iconListBox">
  <div class="iconListBoxHeader">
    <img src="assets/images/coin1.png" alt="">
    <input type="text" class="form-control" value="BTC" />
    <button class="btn-crypto btn btn-primary" onclick="btnCrypto(event)"><i class="fa fa-chevron-down"></i>click</button>
  </div>
  <div class="iconListBoxBody" id="iconListBoxBody">
    <ul class="iconListBoxBodyList">
      <li>
        <img src="assets/images/coin1.png" alt="">
        <span class="coinText">BTC</span>
      </li>
      <li>
        <img src="assets/images/coin2.png" alt="">
        <span class="coinText">ETH</span>
      </li>
    </ul>
  </div>
</div>

Answer 3

由于您已经在使用 addEventListener，删除调用 btnCrypt 函数的内联 JS，并使用 addEventListener 将其添加到缓存的按钮元素中。

// Cache your elements
const iconListBoxBody = document.querySelector('.iconListBoxBody');
const button = document.querySelector('.btn-crypto');

function btnCrypto(e) {
  e.stopPropagation();
  iconListBoxBody.classList.add('active');
}

document.body.addEventListener('click', function() {
  iconListBoxBody.classList.remove('active');
});

button.addEventListener('click', btnCrypto);

.iconListBoxBody { display: none; }
.active { display: block; }

<div class="iconListBox">
  <div class="iconListBoxHeader">
    <img src="assets/images/coin1.png" alt="">
    <input type="text" class="form-control" value="BTC" />
    <button class="btn-crypto btn btn-primary">
    <i class="fa fa-chevron-down"></i>click</button>
  </div>
  <div class="iconListBoxBody" id="iconListBoxBody">
    <ul class="iconListBoxBodyList">
      <li>
        <img src="assets/images/coin1.png" alt="">
        <span class="coinText">BTC</span>
      </li>
      <li>
        <img src="assets/images/coin2.png" alt="">
        <span class="coinText">ETH</span>
      </li>
    </ul>
  </div>
</div>

Uncaught TypeError: Cannot read properties of undefined (reading 'stopPropagation')

Uncaught TypeError: Cannot read properties of undefined (reading 'stopPropagation')

html

javascript

onclick

addeventlistener

onclicklistener