Question

未捕获的类型错误：无法读取未定义的属性（读取“stopPropagation”）

2022-06-02

5225

javascript html onclick onclicklistener addeventlistener

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>