javascript - 使用 stopPropagation 单击特定元素以外的任何地方

Question

我正在尝试使用答案 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>

Answer 1

检查代码中的一些错误:

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