Javascript - triggern benutzerdefinierte Eltern HTML-Ereignis von Kind Element

Question

Ich versuche, ein benutzerdefiniertes Ereignis in einem übergeordneten Element aus dem Kind Elemente Ereignis auszulösen. Das übergeordnete Element ist HelpMenuHeader und das benutzerdefinierte Ereignis wird in HTML als "onsubmenu_click" definiert.

Hier ist ein Ausschnitt des HTML, der nur einen Menübaum zeigt.

<span class="formMenu" id="HelpMenuHeader" onsubmenu_click="OnMenuClick()">Help 
    <div class="formMenu" id="HelpAbout" onmouseup="MenuChildClick()">About us...</div> 
</span> 

Im Kind-Element, Helpabout, muss das MenuChildClick Ereignis der Eltern onsubmenu_click Ereignis auszulösen, so dass das (die Event-Handler der Eltern Informationen verwendet) ausgeführt wird.

Hier ist ein Ausschnitt aus der JavaScript-I für MenuChildClick habe:

function MenuChildClick() 
{ 
    var srcElement = this.event.srcElement; 
    if (srcElement.id != "spacer" && srcElement.tagName != "HR") 
    { 
     // NONE OF THE LINES BELOW WORK 
     //parent.$(srcElement).trigger('onsubmenu_click'); 
     //$(srcElement).trigger('onsubmenu_click'); 
     //var event = document.createEvent('Event'); 
     //event.initEvent('submenu_click', true, true, null); 
     //srcElement.dispatchEvent(event); 
     //oEvent = createEventObject(); 
     //oEvent.result = srcElement.id; 
     //onsubmenu_click.fire(oEvent); 
    } 
} 

1. ich einen Verweis auf das richtige übergeordnete Element in dem MenuChildClick Ereignisse ein Problem mit immer da, wenn ich die übergeordneten Referenz überprüfen hat nicht die Eltern-ID.

2. Und sobald ich die richtige Elternreferenz habe, muss ich das benutzerdefinierte Ereignis onsubmenu_click des Elterns ausführen. (Die Mutter Ereignis wird bereits angehört, da es in der HTML definiert ist, nicht wahr?)

Ich habe IE Kompatibilitätsansicht zu unterstützen, damit ich es brauche auch für frühere IE-Versionen zu arbeiten.

Wer mir sagen, wie ich diese Dinge tun kann (1 & 2 oben) Verlassen der HTML wie es ist?

Vielen Dank im Voraus.

Answer 1

Zuerst müssen Sie das Element übergeben, indem Sie Ihre HTML dies das Ereignis in Ihrem HTML auslöst:

<span class="formMenu" id="HelpMenuHeader" onsubmenu_click="OnMenuClick()">Help 
    <div class="formMenu" id="HelpAbout" onmouseup="MenuChildClick(this); return false;">About us...</div> 
</span> 

Beachten Sie, dass ich das Element übergeben, die den Funktionsaufruf auslöst von ‚this‘ vorbei durch den onmouseup Funktionsaufruf.

Dann können Sie das übergebene Element verwenden, um die Elemente, die Sie definieren möchten, wie folgt überwachen:

function MenuChildClick(element) 
{ 
    var srcElement = element; 
    var parent = element.parentNode 
    if (srcElement.id != "spacer" && srcElement.tagName != "HR") 
    { 
     //parent.trigger('onsubmenu_click'); 
    } 
} 

Answer 2

Sie Methoden verwenden jQuery .on() und .trigger() statt Ereignishandler Attribut

$(function() { 
 
    function parentHandler(event, args) { 
 
    console.log(event.type, args) 
 
    } 
 
    $("#HelpMenuHeader").on("submenu_click", parentHandler); 
 
    $("#HelpAbout").on("mouseup", function() { 
 
    $(this).parent().trigger("submenu_click" 
 
    , ["triggered from #" + this.id]) 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<span class="formMenu" id="HelpMenuHeader">Help 
 
    <div class="formMenu" id="HelpAbout">About us...</div> 
 
</span>

können