javascript——点击除某些元素以外的任何内容；e、 目标不工作。。。有时

我尝试重新创建jQuery的本机

事件处理程序，
。单击（“body”、“element、element”、function（…）。如果用户点击除这两个元素之外的任何东西，它就会做一些事情

我已经成功地做到了这一点，但是，有时脚本无法工作。一段时间后，如果用户单击
主体
，则实际的下拉按钮将触发，它将不会为下拉菜单切换
类
。我不确定为什么会发生这种情况，因为它时不时会起作用


这是我的JavaScript：

var uButton = document.getElementById("user_content"), // the trigger
    uDropdown = document.getElementById("user__dropdown-menu"); // the menu

document.onclick = function(e){
    if(e.target == uButton){ // if button has been clicked
        toggleClass(uDropdown, "active"); // (custom function) toggle the class "active"
    } else if(e.target != uButton && e.target != uDropdown){ // if anything BUT the dropdown and button are clicked
        if(hasClass(uDropdown, "active")){ // (custom function) if the dropdown is active
            uDropdown.className = "user__procedural-outer-dropdown"; // reset the classes to default
        }
    }
}

<div class="navigation__user-content" id="user_content"> <!-- the button !-->
    <span id="nav_username">Sign In</span>
    <div class="user__procedural-outer"></div>
</div>
<div class="user__procedural-outer-dropdown" id="user__dropdown-menu"></div> <!-- dropdown !-->

以及相应的HTML：

var uButton = document.getElementById("user_content"), // the trigger
    uDropdown = document.getElementById("user__dropdown-menu"); // the menu

document.onclick = function(e){
    if(e.target == uButton){ // if button has been clicked
        toggleClass(uDropdown, "active"); // (custom function) toggle the class "active"
    } else if(e.target != uButton && e.target != uDropdown){ // if anything BUT the dropdown and button are clicked
        if(hasClass(uDropdown, "active")){ // (custom function) if the dropdown is active
            uDropdown.className = "user__procedural-outer-dropdown"; // reset the classes to default
        }
    }
}

<div class="navigation__user-content" id="user_content"> <!-- the button !-->
    <span id="nav_username">Sign In</span>
    <div class="user__procedural-outer"></div>
</div>
<div class="user__procedural-outer-dropdown" id="user__dropdown-menu"></div> <!-- dropdown !-->


登录


我已经加入了一个to，这样您就可以尝试并重新创建我的问题

非常感谢您的帮助，

谢谢。
这里似乎有几个问题。我将类名重命名为更简单的单词，并测试代码。我发现，基于你的css和你设置为position:relative和position:absolute的内容，下拉菜单div必须在用户\外部div内

我修改代码如下并测试它。它可以毫无问题地工作：


var uButton=document.getElementById（“用户内容”），
uDropdown=document.getElementById（“用户下拉列表”）；
document.onclick=函数（e）{
if（e.target==uButton | e.target.parentNode==uButton）{
toggleClass（uDropdown，“活动”）；
}else if（e.target！=uButton&&e.target！=uDropdown）{
if（hasClass（uDropdown，“活动”））{
uDropdown.className=“用户下拉列表”；
}
}
}
函数类（元素，cls）{
返回（“”+element.className+“”）.indexOf（“”+cls+“”）>-1；
}
函数切换类（元素，cls）{
element.classList.toggle（cls）；
}
。用户内容{
宽度：70px；
高度：15px；
边缘顶部：6px；
填充：8px；
浮动：对；
背景#730aa2；
边界半径：2px；
光标：指针；
}
.用户内容：悬停{
盒影：插入2px 2px 0#200050；
}
.用户内容>#登录{
显示：内联块；
位置：相对位置；
顶部：-2px；
左：3px；
字体大小：13px；
字体大小：粗体；
颜色：#E6；
}
.用户内容：悬停>#登录{
文本阴影：1px 1px 3px#caca30；
}
.用户外部{
浮动：对；
位置：相对位置；
顶部：-2px；
宽度：17px；
高度：17px；
边界半径：16px；
背景：黄色无重复中心；
背景尺寸：封面；
}
.用户下拉列表{
位置：绝对位置；
顶部：43px；
右：0；
宽度：320px；
高度：200px；
/*背景：#f8f8；*//*查看其位置*/
可见性：隐藏；/*不活动时隐藏*/
溢出：隐藏；
}
.user-dropdown.active{
背景：红色；
能见度：可见；
}
这是一个测试页面

登录
由于您的
导航用户名
不在
用户程序外部
中，因此当发生
document.onclick=function（e）
时，您也需要将其作为目标

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
function toggleClass(element, cls){
    element.classList.toggle(cls);
}

var uButton = document.getElementById("user_content"),
    uButtonSpan = document.getElementById("nav_username"),
    /*since your "nav_username" is not in the "user__procedural-outer", you need to target it also when "document.onclick = function(e)" happens */
    uDropdown = document.getElementById("user__dropdown-menu");

document.onclick = function(e){
    if((e.target == uButton) || (e.target == uButtonSpan)){
        toggleClass(uDropdown, "active");
    } else if((e.target != uDropdown) && (e.target != uButtonSpan) && (hasClass(uDropdown, "active"))){
            uDropdown.className = "user__procedural-outer-dropdown";
    }
}

我尽可能少地修改了你的代码。我希望这就是你要找的


函数类（元素，cls）{
返回（“”+element.className+“”）.indexOf（“”+cls+“”）>-1；
}
函数切换类（元素，cls）{
element.classList.toggle（cls）；
}
var uButton=document.getElementById（“用户内容”），//触发器
uDropdown=document.getElementById（“用户下拉菜单”）；//菜单
document.onclick=函数（e）{
var elem=e.目标；
做{
开关（elem）{
案例按钮：
返回toggleClass（uDropdown，“活动”）；
案例下拉列表：
返回无效（0）；
}
}
while（elem=elem.parentNode）；
if（hasClass（uDropdown，“活动”））
uDropdown.className=“用户\程序-外部-下拉”；
}
.navigation\u用户内容{
宽度：70px；
高度：15px；
边缘顶部：6px；
填充：8px；
浮动：对；
背景#730aa2；
边界半径：2px；
光标：指针；
}
.navigation\u用户内容：悬停{
盒影：插入2PX2PX0PX#5a0d91；
}
.navigation_uu用户内容：悬停#导航u用户名{
文本阴影：2px2px0px#5a0d91；
}
.navigation_uuuser-content>#nav_用户名{
显示：内联块；
位置：相对位置；
顶部：-2px；
左：3px；
字体大小：13px；
字体大小：粗体；
颜色：#E6；
}
.用户\程序外部{
浮动：对；
位置：相对位置；
顶部：-2px；
宽度：17px；
高度：17px；
边界半径：16px；
背景：url（“noimagefind.png”）没有重复中心；
背景尺寸：封面；
}
.user__程序-外部-下拉列表{
位置：绝对位置；
顶部：43px；
右：0；
宽度：320px；
高度：200px；
溢出：隐藏；
}
.user_u_procedural-outer-dropdown.active{
背景：红色；
}

登录
添加一个简单的
控制台.log（e.target）
，您可以看到目标有时是
登录的
@Claies当它点击按钮或其中的内容时，我如何确保它工作？我尝试过
uButton=document.querySelector（“#user_content，#user_content*）”
，但它有时仍然有效。我相信问题在于存在嵌套的HTML元素。目标应该是最内层的嵌套元素。我相信解决方案是使用条件
（elem=elem.parentNode）
@JonathanGray介意发布答案吗？：）对原始JavaScript还是新手，所以我不知道怎么做..哈哈，幸运的是，我无法控制类的调用，所以我有点被它们卡住了哈哈，我知道这可能是一个大问题，但介意通过注释解释它是如何工作的吗？我对JS还是新手，如果你能的话，我会非常感激的！：）@Caelan。我回到了o翻阅了代码，意识到我实际上错过了一些东西。我决定修改我的答案，以利用一个功能，更好地解决问题，并使算法能够更准确地执行其意图。我希望它足够清晰，让您能够理解