Javascript 单击子div时未调用父onclick（）事件

我有一个嵌套div的情况。我有一个父div（有一个onclick（）事件）和几个正在动态填充的div。我了解到，通过“冒泡”，onclick（）事件应该通过DOM向上传播，从而在所有父对象中触发onclick（）事件。我所做的所有研究都表明，有一群人正试图阻止这种情况，而我却无法让它发挥作用。让onclick（）工作的唯一方法是单击div的边缘附近，可能是子div不存在的地方，然后直接单击父div

我在下面包含了适用的代码。页面上可能有多达9个这样的所谓“小部件”，但我已经删除了所有代码，除了引用第一个“小部件”之外

更新：当我尝试从JavaScript函数中提取所有内容，并将其直接放入HTML代码中时，它会像我所期望的那样工作。然而，这样做会迫使我放弃所需的功能，所以我将尝试避免这种变通方法

下面有一个新的提琴，基本上显示了我的意图，尽管事件并没有像我预期的那样调用JS函数

更新#2：我创建了一个fiddle（#5），它模仿我在代码中看到的响应。使用提琴时，您会注意到在div的中心单击时不会发出警报，但当您在div的外部边界附近单击时，最终会得到响应

解决的问题：

根据下面Racheet的回答，这个问题已经解决了。我已经创建了一个完整功能的代码供参考：

JAVASCRIPT:

function initializeWidgets(){

var widget1 = "Professional";

widget1 = 
    "<div class='outer'><div class='middle'>
    <div class='inner'><h1>" + widget1 + "</h1></div></div></div>";

document.getElementById("widget1").innerHTML = widget1;
}

function hoverWidgets(widgetID){
var w = new Array();
w[0] = "Work Experience, Educational History, and Resume Download";

w[widgetID-1] = "<div class='outer'><div class='middle'>
    <div class='inner'><h2>" + w[widgetID-1] + "</h2></div></div></div>";

document.getElementById("widget"+widgetID).innerHTML = w[widgetID-1];

}

function initializeWidgets（）{
var widget1=“专业”；
widget1=
"
“+widget1+”；
document.getElementById（“widget1”）.innerHTML=widget1；
}
函数hoverWidgets（widgetID）{
var w=新数组（）；
w[0]=“工作经历、学历、简历下载”；
w[widgetID-1]=”
“+w[widgetID-1]+”；
document.getElementById（“小部件”+widgetID）.innerHTML=w[widgetID-1]；
}

适用的HTML：

<div class="widget" id="widget1" onclick="alert(1);" onmouseover="hoverWidgets('1')"
onmouseout="initializeWidgets()"></div>

当前小提琴：

最后一把小提琴：

---

如果您的点击没有以某种方式具体引用DIV，您可以始终将onclick添加到其他嵌套DIV。。。。否则，您需要发布更多的html。

我已经使用了您的示例并解决了问题。以下是我的解决方案：

您遇到的问题是由于您创建内部div的方式。当您通过将html作为字符串写入DOM节点的innerHTML属性在javascript中创建html元素时，会删除其中的旧节点，并创建一个新节点来替换它

当旧节点被删除时，附加到它的事件处理程序也会被删除，因此当鼠标移动器运行时，它们实际上会删除并重新创建各种内部div及其现有事件处理程序。因此，在html中指定的onclick处理程序对于这些内部节点不存在

通过直接写入innerHTML属性将html添加到文档中通常不是一个好主意

我重写了这个解决方案，这样它就可以在JavaScript中本地创建节点，然后重新编写initializeWidgets和hoverWidgets函数，以便在内部div中的和节点之间进行交换

我已经将整个过程放入了一个闭包中，以防止它用initializeWidgets和hoverWidgets函数以外的任何东西污染全局范围。此实现只有在注册为onLoad函数的处理程序时才有效，因为它的构造函数部分需要在html尝试将这两个函数作为事件处理程序附加之前运行并创建这两个函数

如果您发现这个解决方案对于您的需求来说很复杂，那么您应该仍然能够通过使用javascript以本机方式创建和操作divs和h1/h2标记来创建自己的解决方案，而不是直接写入innerHTML属性

---

单击警报在我上面添加的提琴中的整个div中起作用。也许您应该包含更多的HTML，特别是您提到的嵌套div。我还在控制台中收到JS错误：“ReferenceError:hoverWidgets未定义”isherwood，我提到的嵌套div发生在initializeWidgets（）函数和hoverWidgets（）函数中。我所说的子div是这些函数中的divclass=“outer”、“middle”和“inner”。经过进一步的故障排除，我发现它并不特定于子div。我删除了所有的子div，只是在父div中放了一个图像，我得到了相同的响应。问题可能是因为div中的对象是在函数中定义的，因此是“超出范围”之类的吗？请更新您的问题，而不是在注释中进行冗长的解释。你解决JS错误了吗？如果有，请更新小提琴。我还没有解决问题。我创造了一把新小提琴。然而，我并不十分精通小提琴的工作原理。它似乎没有触发我创建的任何JS函数，但你应该对我的目标有一个很好的了解。看到上面贴的小提琴。这太棒了，我想这正是我需要的，我就快到了。显然我只需要再轻轻推一下。当您说只有注册为onLoad函数的处理程序时，实现才能工作。你的意思是：“这似乎对我不起作用。如果你在chrome中，请转到JSFIDLE，右键单击显示输出的框架，让它“显示框架源”，你会明白我的意思。太好了！谢谢你，先生！我已经更新了小提琴，只做了一些小改动（修饰性的，只是让文本在div中垂直居中）。我会在任务中将链接添加到小提琴上

    window.initializeWidgets = (function() {
    /*THIS SECTION IS YOUR WIDGET CONSTRUCTOR*/

    //Set up your constants for this widget
    var widget1 = "Professional";
    var widget2 = "Work Experience, Educational History, and Resume Download";

    //first you grab your old element
    var widgetSmallElement = document.getElementById("widget1");

    //then you make your new elements
    var outer = document.createElement("div");
    outer.setAttribute('class','middleSmall');
    var inner = document.createElement("div");
    inner.setAttribute('class','innerSmall');
    var heading = document.createElement("h1");
    heading.innerHTML = widget1;
    var subHeading = document.createElement("h2");
    subHeading.innerHTML = widget2;

    //now you chain the above and then add them to the document
    inner.appendChild(heading);
    outer.appendChild(inner);
    widgetSmallElement.appendChild(outer);

    //This is your new, simplified hoverWidgets handler
    window.hoverWidgets = function (widgetID) {
        inner.replaceChild(subHeading,inner.firstChild);        
    };

    /*THIS SECTION IS THE RETURN VALUE FROM YOUR CONSTRUCTOR*/
    return function() {
        //this is the function actually given to the onClick and onMouseout handler as the initializeWidgets funciton.
        inner.replaceChild(heading,inner.firstChild);
    };

})();