Question

我试图从子元素事件中触发父元素中的自定义事件。父元素是HelpMenuHeader，它的自定义事件在HTML中被定义为＆＃34; onsubmenu_click＆＃34;。

这是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事件，以便执行该事件（该事件处理程序使用父信息）。

这是我为MenuChildClick提供的javascript片段：

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＆amp; 2）保留HTML原样？

提前致谢。

Answer 1

首先，您必须通过将HTML更改为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函数调用传递'this'来传递触发函数调用的元素。

然后，您可以使用传递的元素来定义要监视的元素，如下所示：

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

Answer 2

您可以使用jQuery方法.on()和.trigger()代替事件处理程序属性

＆＃13;

$(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])
  })
})

＆＃13;

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

＆＃13;

Javascript - 从子元素

2 个答案: