标签: event-bubbling

请阅读这篇文章.我有同样的问题,如本文所述,但我试图在VB.net而不是c#.

我很确定这样做我必须使用自定义事件.(我使用代码转换站点来了解自定义事件.)因此在IDE中键入以下内容时:

公共自定义事件AddRemoveAttendees As EventHandler

它扩展为以下代码段.

Public Custom Event AddRemoveAttendees As EventHandler
    AddHandler(ByVal value As EventHandler)

    End AddHandler

    RemoveHandler(ByVal value As EventHandler)

    End RemoveHandler

    RaiseEvent(ByVal sender As Object, ByVal e As System.EventArgs)

    End RaiseEvent
End Event

但我无法弄清楚如何处理它.直到今天,我从未听说过自定义事件.

我想要的底线是让按钮的click事件冒泡到用户控件的容器.我知道我可以包装自己的活动但我至少想在我走得更远之前了解自定义事件.

赛斯

我知道一个事件有两种模式 - 冒泡和捕捉.

当事件设置为冒泡时,Javascript会检查"文档"吗？

当事件设置为捕获时,Javascript是否始终从"文档"开始？

Javascript如何知道停止/启动的位置？

更新:

假设我的body标签中有以下代码.

<div id='outer'>
    <div id='inner'></div>
</div>

当我将一个事件设置为#inner来冒泡时,Javascript会检查文档还是停在#outer？

我有一个 div，其中有一个 Material ui Select、Material ui TextField 和一个纯 html 选择。这个 div 有一个 onchange 事件，它只是控制台记录event.target.value。当材质 ui TextField 的 onchange 或选择被触发时，event.target.value会记录到控制台。但不适用于material ui select的onchange。

示例代码：https://codesandbox.io/s/material-demo-03495? file=/demo.tsx

我在这里缺少什么？

谢谢。

我有一个可点击的自定义TextView.它定义了自己的onClick处理程序,以便根据点击次数更改其外观.但是,如果我在我的活动中定义第二个onClick处理程序,以便根据被单击的按钮执行某些操作,则只调用其中一个onClick函数.onClick是一个void函数 - 有没有办法说我没有处理这个点击,请把它传递给其他onClick处理程序？

这里要更清楚的是代码:

在扩展TextView的MyCheckButton里面我有:

    setOnClickListener( mClickListener );

    private OnClickListener mClickListener = new OnClickListener() {
        public void onClick(View v) {
            toggle();
        }
    };

但是我将MyCheckButton包含到我的Activity中,当然我需要在点击它时做一些事情,所以我将另一个OnClickListener附加到它:

MyCheckButton button= (MyCheckButtonButton) findViewById(R.id.cb);
button.setOnClickListener(new OnClickListener(){
    @Override
    public void onClick(View v) {
        // do something in the app
    }

});

通过调用setOnClickListener两次,看起来我正在替换原始侦听器,因此更改外观的toggle()永远不会被调用.如果单击此按钮已经使用onClick处理程序更改其外观,如何在我的活动中执行某些操作？我以为我只会看到两个OnClickListeners被调用.

我一直试图理解甚至冒泡,并不完全确定我完全遵循它.我开始阅读它,以便当用户开始将数据输入表单时(例如,与StackOverflow类似的方式!),当我们在网站上留下页面时,我可以发出警告.

以下代码似乎可以跨浏览器工作:

var entereddata = false;

$(document).ready(function()
{
    $('#contactform').bind('keypress',function(e) {
            if((e.which > 96 && e.which < 123) || (e.which > 47 && e.which < 58)) {
                    entereddata = true;
                    //alert(e.which);
            }
    });
});

function confirmLeave(e, d)
{
    if(!e) e = window.event;//window.event;
    if(!d) d = entereddata;

    var confirmationMessage = 'It appears you have started to enter information into the contact form, but have not yet submitted it';

    if(!d)
    {
            e.cancelBubble = true;
    } else
    {
            return confirmationMessage;
    }
}

window.onbeforeunload=confirmLeave; 

但是,当我单击表单的提交按钮时,也会调用它,这是我不想要的.我尝试了各种代码添加,例如添加: …

我试图保持我的hashChange事件绑定冒泡.

我有这个:

$(window).bind('hashchange', function( e ) {
    console.log("hash fired");
    // run hashChange routine
    });

我的脚本管理页面上的面板,每个面板都有自己的历史堆栈.上面的每次转换都会触发,但是我阻止了前向转换的hashChange,所以我可以更深入地进入面板.在向后的"转换"中,只有hashChange触发并且没有被阻止,所以我可以返回.

导航可能如下所示:

panel A, start down > page2
panel A, page2 down > page3
panel A, page3 up > page2
panel A, page2 up > start - hashChange fires twice here... 

一切正常(= hashChange触发一次),直到我在初始设置之前到达页面.在最后一步,上面的hashChange绑定会触发两次.我已经尝试永远设置一个标志来阻止第二个hashChange,但它不能像我希望的那样工作.

问题:
怎样才能确保这不会冒泡？我正在尝试这样的事情,但它不起作用:

var $blockBubblingHashes = 0;
$(window).bind('hashchange', function( e ) {       
   if ($blockBubblingHashes == 0) {
      // run hashChange routine
      $blockBubblingHashes = 1; 
      } else {
         $blockBubblingHashes = 0;
         }
    });

我在PageDefault.aspx中有两个UserControls - UserControl1.ascx和UserControl2.ascx:

我如何使用事件冒泡来调用method(GetLabelText() in UserControl1.ascx)UserControl2.ascx？

这是我的示例代码 - 当我单击按钮(UserControl2Button1 in UserControl1.ascx)时 - 我想调用方法GetLabelText() from UserControl2.ascx- 使用事件冒泡.

PageDefault.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PageDefault.aspx.cs" Inherits="TelerikAjaxEvents.PageDefault" %>
<%@ Register TagPrefix="uc" TagName="UserControl1" Src="~/UserControl1.ascx" %>
<%@ Register TagPrefix="uc" TagName="UserControl2" Src="~/UserControl2.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Page Default</title>
</head>
<body>
    <form id="form1" runat="server">
        UserControl1:
        <uc:UserControl1 ID="UserControl1" runat="server" />

        UserControl2:
        <uc:UserControl2 ID="UserControl2" runat="server" />

    </form>
</body>
</html>

UserControl1.ascx

<%@ Control Language="C#" …

在我的项目中,我有一个带有龙头处理程序的大容器.在这个容器里面,我也有一个按钮.我的目标是处理背景容器上的所有水龙头,除非用户点击按钮.不幸的是,当我点击按钮时,它会触发按钮上的点击处理程序和容器的点击处理程序.

这是XAML的一些示例:

<Grid Width="250" Height="250" Fill="Red" Tapped="Container_Tapped">
    <Button Click="Button_Clicked">
        <Rectangle Width="20" Height="20" Fill="Blue" />
    </Button>
</Grid>

有没有办法处理按钮上的点击事件,以防止它冒泡到容器？还有其他想法吗？

我有以下(简化)标记代码:

<div id="container">
    <div data-value="1">
        <span>Click me 1</span>
    </div>
    <div data-value="2">
        <span>Click me 2</span>
    </div>
</div>
<div id="messages"></div>

我想通过仅在其上附加事件监听器来利用冒泡#container,并获取被点击的子项data-value.

document.getElementById('container').addEventListener('click', function(e){
    document.getElementById('messages').innerHTML = 'you clicked ' + e.target.dataset.value;
}, false);

如果点击的区域是div区域(小提琴中的红色),一切正常.我怎样才能获得data-value也只有当点击来自DIV的儿童(如点击蓝色跨度)的数据值,而不改变事件监听器？

这是小提琴:http://jsfiddle.net/hgLagy31/1/

感谢您的阅读...我会直接解决这个问题。

我有一个onclick函数附加到图像。

<div id="mercury" onclick="displayCreations()">

JavaScript函数：

function displayCreations(){
   document.getElementById("projects").style.display = "block";
}

到达页面后，我作为块显示的div设置为none。此功能将显示设置为“阻止”，这可以正常工作。

我在为div内的图像设置onclick函数（将显示值重新设置为none）时遇到麻烦。这似乎不适用于我当前的代码...

<div id="mercury" onclick="displayCreations()">
        <img id="exit" onclick="hideCreations()" src="./assets/images/exit.png" alt="exit button" title="Leave Planet: Mercury" />
        <div id="projects">
            <h3>No creator here, but it looks like you've found some his wonderous creations...</h3>
            <ol>
                <li>Project 1</li>
                <li>Project 2</li>
                <li>Project 3</li>
            </ol>
        </div>
    </div>

function displayCreations(){
   document.getElementById("projects").style.display = "block";
}

function hideCreations(){
   document.getElementById("projects").style.display = "none";
} …