Question

我创建了下一个jsfiddle：

这是我的代码：

newtype Church a = Church { runChurch :: forall r. (a -> r       -> r) -> r -> r }
newtype Scott  a = Scott  { runScott  :: forall r. (a -> Scott a -> r) -> r -> r }

我希望点击粉红色背景会弹出一条值为1的消息（一条警告信息）。

点击黄色时，我不想发生任何事情。

我读过这篇博客但没有成功..

任何帮助表示赞赏！

Answer 1

我同意其他人声明使用jQuery或直接DOM调用。

这是jQuery解决方案的另一个镜头 - 与上面的解决方案非常相似。我继续前进并展示它，因为它直接针对图像 - 以防你真正想要实现的目标。

$(function()
{   var mainDiv = $('div.pink:first'),
        imgs = $('img');

    mainDiv.click(function()
    {   alert('1');
    });

    imgs.click(function(e)
    {   e.stopImmediatePropagation();
    });
});

Answer 2

您可以将<?xml version="1.0" encoding="utf-8"?> <GJUDGE triggerEvent="Update" xmlns=""> <id_judge>09002P</id_judge> <Loaded> <JudgeCode> <CodeID>7598</CodeID> <CacheTableID>136</CacheTableID> <RevisionID>5321</RevisionID> <Code>07001G</Code> <RootNodeID>0</RootNodeID> <EffectiveDate>2007-06-14T00:00:00</EffectiveDate> <UserIDCreate>1</UserIDCreate> <TimestampCreate>2003-02-01T16:45:00</TimestampCreate> <UserIDChange>1</UserIDChange> <TimestampChange>2015-07-06T09:49:27.700</TimestampChange> <Description>Amos,Wako ,</Description> <JudicialOffCodeID>7598</JudicialOffCodeID> <NameFirst>Amos</NameFirst> <NameLast>Wako</NameLast> <UnavailableOnly>1</UnavailableOnly> <Private>0</Private> </JudgeCode> </Loaded> </GJUDGE>添加到黄色班级。这将导致这些元素不会触发点击事件。

有关详细信息，请参阅此处https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Answer 3

您混合使用jQuery和DOM方法调用。另请注意，对于附加事件侦听器，您应该等待所有HTML文档准备就绪。

我建议使用DOM方法或jquery方法。以下是jquery的一个示例：

$(function(){
    $('.pink:first').on("click", function(e) {
         alert('1');
    });

    $('.yellow').on('click', function (e) {
        e.stopPropagation();
    });
})

另见JSfiddle

捕捉和冒泡事件

3 个答案: