Javascript - 從子元素觸發自定義父級html事件

我想從子元素事件觸發父元素中的自定義事件。父元素是HelpMenuHeader，它的自定義事件在HTML中定義爲「onsubmenu_click」。Javascript - 從子元素觸發自定義父級html事件

下面是僅顯示一個菜單樹的HTML代碼片段。

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

在子元素，HelpAbout的MenuChildClick事件需要觸發父母的onsubmenu_click事件，以便將執行（該事件處理程序使用父母的信息）。

下面是一段JavaScript代碼，我有MenuChildClick：

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); 
    } 
}

我有讓在MenuChildClick事件正確的父元素的引用一個問題，因爲當我檢查父參考沒有父ID。
然後，一旦我有正確的父引用，我需要執行父母的onsubmenu_click自定義事件。（父事件已經被聽取，因爲它是在HTML定義的，對吧？）

我要支持IE兼容性視圖，我需要爲以前的IE版本正常工作。

任何人都告訴我如何做這些事情（上面的1 & 2）離開HTML，因爲它是？

在此先感謝。

來源

2017-05-24 johnr2000

難道你不能在'MenuChildClick（）'內調用'OnMenuClick（）'嗎？此外，您並未定義'parent'元素（您正在尋找'$（srcElement）.parent（）'），並且您正在重寫'event' JavaScript關鍵字。 –

爲什麼不直接在'MenuChildClick（）'上直接調用事件？ – LebCit

我該如何稱呼父母的活動？我無法直接調用OnMenuClick（），因爲它需要對父對象的引用，因爲它使用「事件」對象在父對象上執行大量操作。 – johnr2000

首先，你必須傳遞是通過改變你的HTML這個觸發你的HTML事件的元素：

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

請注意，我路過，路過「這個」觸發函數調用的元素通過onmouseup函數調用。

然後你可以使用通過元素來定義你想要的元素來監視如下：

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

來源

2017-05-24 22:26:11 Darkisa

我嘗試了一些這些建議，並沒有觸發事件。所以我做了一個簡單的測試： var parent = $（document.getElementById（'HelpAbout'））。parent（）; parent.trigger（'onsubmenu_click'）; parent.trigger（'onsubmenu_click'）; 父引用位於正確的元素上，但事件仍未觸發。我不明白。這應該工作。這可能是由於HTML中定義的事件？ – johnr2000

您可以使用jQuery方法.on()和.trigger()，而不是事件處理程序屬性

$(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>

來源

2017-05-24 22:30:07 guest271314

我試過這個，但是當我運行它時，代碼不會進入函數，即當我點擊HelpAbout時，onmouseup不會進入函數。 – johnr2000

什麼意思是「當我點擊HelpAbout時沒有進入函數」？ – guest271314

我在調試模式下運行它，並且在函數中有斷點，當我點擊HelpAbout時，它沒有進入函數。我必須在IE兼容性視圖中運行，所以我想知道是否會阻止它。 – johnr2000

Javascript - 從子元素觸發自定義父級html事件

回答

相關問題