Question

我有一个列出我的联系人的页面，每个联系人都包含在一个div中，onClick打开一个模态对话框，显示有关该联系人的更多信息。

现在，在页面上列出了每个联系人的姓名和电子邮件，如上所述，点击用户“框”将导致显示一个对话框。但我想要它，以便当我点击对话框没有显示的电子邮件（当然链接），而不是打开默认的mailhandler。

它的工作方式现在默认邮件处理程序（outlook）打开并且用户对话框也打开...我试图销毁并关闭对话框，当我点击电子邮件但对话框可能在...之后打开

有什么好的解决办法吗？

编辑：我认为我有一些很好的答案，但它需要一些采用...如果我的页面上的代码看起来像这样：

<ul id="users">
    <li onClick="OpenUserDialog(usersId);">
        blablala
        <span onClick="OpenMail(usersMail);">usersMail<span>
    </li>
</ul>

因此，当我点击用户邮件时，<li>上的onClick也会运行，但我不希望这样。

Answer 1

您可以选择邮件链接，并在其处理程序中取消事件传播。

假设这样的HTML布局：

<div class="popupOpener">
    <a href="mailto:me@example.com">mail me</a>
</div>

然后试试这段代码：

$('div.popupOpener').click(function () {
    openPopup();
});

$('a[href^="mailto:"]').click(function (e) {
    e.stopPropagation();
});

更新以响应编辑：

您应该避免以这种方式将事件附加到元素。您已经在使用jQuery，它擅长于这个确切的任务。将您的HTML更改为如下所示：

<ul id="users">
    <li data-userId="usersId"> <!-- I assume this is coming from the server -->
        blablala
        <a href="mailto:usersMail">usersMail</a>
    </li>
</ul>

然后这个jQuery将起作用：

$('#users')
    .children('li')
    .click(function () {
        openPopup($(this).data('userId'));  // not 100% sure on the syntax here
    })
    .children('a')
    .click(function (e) {
        e.stopPropagation(); // this stops the event from going any further (and 
                             // reaching the <li>, but doesn't stop the default
                             // browser behaviour (which is to open the link)
    })
;

Answer 2

听起来你需要在onclick事件上停止传播，例如在jQuery中

$("#myDiv").click(function(event){
  event.stopPropagation();  
});

不要打开对话框

2 个答案: