使用 stopPropagation 单击除特定元素之外的任何位置答案

【问题标题】：Clicking anywhere but certain element using stopPropagation使用 stopPropagation 单击除特定元素之外的任何位置
【发布时间】：2013-06-25 13:53:22
【问题描述】：

我正在尝试使用答案 to this question 来准确实现该用户想要做的事情。

我基本上是在制作一个弹出框，当您单击链接时会出现，当您单击弹出框以外的任何位置时，它会关闭，如果您单击打开它的链接，它也会关闭它。

我遇到的问题是，当我点击链接时没有任何反应，当我删除所有 stopPropagation 内容时，它会打开但不会关闭。

这是我的 JavaScript：

function close_popovers(){
    $('.new_tooltip').remove();
}

function toggle_popover(user_id){
    $('.new_tooltip').show();
    var position = $('#link_' + user_id).position();

    var top_position = (position.top - $('.new_tooltip').outerHeight()) - 10;
    var left_position = (position.left - ($('.new_tooltip').outerWidth() / 2) + ($('#link_' + user_id).outerWidth() / 2));

    $('.new_tooltip').css ({
        top: top_position + "px",
        left: left_position + "px"
    });
    return false;
}

$(document).click(function() {
    close_popovers();
});
$(".new_tooltip, .stoppropagation").click(function(e) {
    e.stopPropagation();
    return false;
});

这是打开弹出框的 html 链接：

<a href="#" id="link_34" class="stoppropagation" onclick="toggle_popover(34); return false;">Adam Tester</a>

最后是我的弹出框的 html：

<div class="new_tooltip" id="popover_34" style="display:none; top:0px; left:0px; position:absolute; z-index:1000;">
    <div class="top">
        <div class="picture">
            <div class="userphotomedium">
                <img class="actual_photo" src="image url" width="31" height="31" />
            </div>
        </div>
        <div class="infomation">
            <div class="name main_text_colour">Name</div>
            <div class="role">Department of Science and Research - Subdivision 3</div>
        </div>
        <div class="buttons">
            <div class="closebtn_con">
                <div class="crossbtn" style="float:none;"></div>
            </div>
            <div class="viewbtn_con">
                <a href="#" id="viewbio_34" class="button buttonmini biobtns" style="width: 48px;"><div>View Bio</div></a>
            </div>
        </div>
        <div class="floatfix"></div>
    </div>
    <div class="bottom">
        <dl>
            <dt>Department</dt>
            <dd class="main_text_colour">Medical, Business Unit Head</dd>

            <dt>Country</dt>
            <dd class="main_text_colour">United Kingdom</dd>

            <dt>Email</dt>
            <dd class="main_text_colour">adam.tester@edge.co.uk</dd>

            <dt>Contact Number</dt>
            <dd class="main_text_colour">01832 300097</dd>

            <dt>Mobile Number</dt>
            <dd class="main_text_colour">07710 664 689</dd>
        </dl>
        <div class="bio" id="bio_34" style="background-color:#FFFFFF; position:relative; z-index:100;">
            <div class="main_text_colour" style="font-weight:bold;">Biography</div>
            <div id="bio_width_34" style="white-space:pre-wrap; overflow-y:scroll; height:100px; width:100px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        </div>
    </div>
</div>

【问题讨论】：

请注意，return false; 等效于在 jQuery 事件处理程序中调用 e.preventDefault(); 和 e.stopPropagation();。我不建议使用return false; - 如果需要，只需阻止默认行为和/或停止传播。这不能解决你的问题，我只是指出来
你打电话给$('.new_tooltip').remove();，怎么再显示？我想只需要隐藏它$('.new_tooltip').hide();
that seem to make it work a bit better thanks, but if you click on the document before clicking on the link the popover wont open。因为你已经删除了它 ($('.new_tooltip').remove();)
或者你刚才没有看我的评论？
正确使用$('.new_tooltip').toggle();或检查当前状态和show、hide。@Adam Tester

标签： javascript jquery html css

【解决方案1】：

检查代码中的一些错误：

使用$(".new_tooltip, .stoppropagation") 而不是$(".new_tooltip .stoppropagation")。
$('.new_tooltip').remove(); 将删除弹出窗口并且您无法再次显示它。请改用$('.new_tooltip').hide();。
在您的代码中，您总是在单击链接时show 弹出窗口。尝试$('.new_tooltip').toggle(); 或检查当前状态并相应地检查show、hide。

【讨论】：