javascript-js行导致其上的代码无法执行

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-js行导致其上的代码无法执行，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4669字，纯文字阅读大概需要7分钟。

内容图文

这是一支带有完整html的笔：https://codepen.io/froggomad/pen/WLdzoB

我正在编写2个函数-一个显示隐藏的内容,另一个隐藏它.我希望show()函数在父div上执行,hide()函数在选择器.click-text上执行.

但是,我将.click-text上的文本从show切换为隐藏,所以我不希望hide函数始终保留在文本上.我还希望很明显的是,当更改为隐藏功能时,它的交互式文本会显示为链接.

很好,但是当尝试将父级的onclick Attr设置回show()函数时,hide块中的任何内容都不会执行.

如果删除设置父级onclick Attr的行,则脚本将按预期执行.如果我设置另一个元素的onclick Attr,脚本将按预期执行.

但是,在该行中没有任何反应,控制台中也没有输出指示错误.我什至设置了元素类型和类名警报,以确保我定位到正确的元素.

获取元素匹配选择器的最接近的父级：

var getClosest = function (element, selector) {
    for ( ; element && element !== document; element = element.parentNode ) {
      if ( element.matches(selector) ) return element;
    }
    return null;
}

显示隐藏元素ul.service-category-menu

function show(elem) {    
    var menu = elem.querySelector("ul.service-category-menu"),
               click = elem.querySelector(".click-text"),
               parent = getClosest(elem, '.service-category');
    ;
    if (menu.style.display === "none" || menu.style.display === "") {
        menu.style.display = "block";
        click.innerHTML = "<a href=\"#\">Click to Hide<\/a>";
        click.setAttribute('onclick','hide(this);');
        elem.setAttribute('onclick', 'null');
    }
}

隐藏元素

function hide(elem) {    
    var parent = getClosest(elem, '.service-category'),    
                menu = parent.querySelector("ul.service-category-menu"),
                click = parent.querySelector(".click-text")
    ;
    alert(parent + "\n" + parent.className);
    //Outputs div element with expected class name (class name is unique on each div)
    if (menu.style.display === "block") {
        menu.style.display = "none";
        click.innerHTML = "Click to Show";
        click.setAttribute('onclick', 'null');
        //the above lines don't execute when the following line is in place. There's no error in console.
        parent.setAttribute('onclick','show(this)');
    }
}

解决方法:

首先,我必须承认我反对使用onclick属性.如果您不使用VueJS或React之类的框架,我认为HTML和JS应该保持分离,以实现更好的控制和可维护性.

您可以使用addEventListener,removeEventListener和e.stopPropagation()避免触发多个事件处理程序.

事件分为两个阶段：

>事件捕获：事件从文档一直传播到目标元素.

>要在此阶段捕获事件,请执行以下操作：

elm.addEventListener('click', myFunc, true);

>事件冒泡：事件从目标反弹回文档.

>要在此阶段捕获事件,请执行以下操作：

elm.addEventListener('click', myFunc, false); /* or just omit the 3rd param */

使用e.stopPropagation()可使您断开该链.

// When the DOM is ready
window.addEventListener("DOMContentLoaded", init);

function init() {
  // Get all categories
  var $categories = document.querySelectorAll(".service-category");
  // For each of them
  Array.from($categories).forEach(function($category) {
    // Add an event listener for clicks
    $category.addEventListener("click", show);
  });
}

function getClosest(element, selector) {
  for (; element && element !== document; element = element.parentNode) {
    if (element.matches(selector)) return element;
  }
  return null;
}

function show(e) {
  var $menu  = this.querySelector("ul.service-category-menu"),
      $click = this.querySelector(".click-text");
  if (["none", ""].includes($menu.style.display)) {
    $menu.style.display = "block";
    $click.innerHTML = '<a href="#">Click to Hide</a>';
    $click.addEventListener("click", hide);
    // Remove the `show` event listener
    this.removeEventListener("click", show);
  }
  e.stopPropagation();
}

function hide(e) {
  var $parent = getClosest(this, ".service-category"),
      $menu   = $parent.querySelector("ul.service-category-menu"),
      $click  = $parent.querySelector(".click-text");
  if (!["none", ""].includes($menu.style.display)) {
    $menu.style.display = "none";
    $click.innerHTML = "Click to Show";
    $click.removeEventListener("click", hide);
    $parent.addEventListener("click", show);
  }
  e.stopPropagation();
}

.service-category{display:inline-block;border:3px solid #ccc;margin:1%;font-weight:700;font-size:3.5vw;cursor:pointer;background-color:#fff;z-index:3;background-position:center;background-size:cover;color:#000}.click-text{text-align:right;font-size:1.25vw;font-style:italic;font-weight:700;padding-right:1%}.service-category:hover .click-text{color:#b22222}.service-category-menu{display:none;margin-left:8%;margin-right:8%;margin-top:1%;background-color:#fff;font-weight:700;font-size:1.6vw;border-radius:10px}

<div class="service-category web-back" id="web-back">
  <div class="row-overlay">
    Web <br /> Development
    <div class="click-text">Click to Show</div>
    <ul class="service-category-menu web">
      <li>
        Some text...
      </li>
    </ul>
  </div>
</div>

<div class="service-category web-front" id="web-front">
  <div class="row-overlay">
    Web <br /> Design
    <div class="click-text">Click to Show</div>
    <ul class="service-category-menu web">
      <li>
        Some text...
      </li>
    </ul>
  </div>
</div>

内容总结

以上是互联网集市为您收集整理的javascript-js行导致其上的代码无法执行全部内容，希望文章能够帮你解决javascript-js行导致其上的代码无法执行所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端