javascript - 在 Firefox 中单击链接时，有没有办法删除蓝色突出显示？

Question

所以我的页面上有三个链接，它们是我的电子邮件，当您单击它们时，应该会将电子邮件复制到您的剪贴板。它会这样做，但出于某种原因，仅在 Firefox 中，它会在您单击链接后在链接上创建此蓝色突出显示。当我点击链接时，有什么办法可以删除它吗？这是我的 html、css 和 javascript:

$(document).ready(function() {
    $("#open_menu").click(function() {
        $("#menu").css({
            "pointer-events":"auto",
            "display":"flex"
        });
        if($("#menu").hasClass("component-drop_down_menu_hide_animation"))
            {
                $("#menu").removeClass("component-drop_down_menu_hide_animation");
            }
        $("#menu").addClass("component-drop_down_menu_show_animation");
        $("#component-main_content").css({"pointer-events":"none"});
        if($("#component-main_content").hasClass("component-drop_down_menu_close_animation"))
            {
                $("#component-main_content").removeClass("component-drop_down_menu_close_animation");
            }
        $("#component-main_content").addClass("component-drop_down_menu_open_animation");
    });
    $("#close_menu").click(function() {
        $("#menu").css({
            "pointer-events":"none",
            "display":"none"
        });
        if($("#menu").hasClass("component-drop_down_menu_show_animation"))
            {
                $("#menu").removeClass("component-drop_down_menu_show_animation");
            }
        $("#menu").addClass("component-drop_down_menu_hide_animation");
        if($("#component-main_content").hasClass("component-drop_down_menu_open_animation"))
            {
                $("component-main_content").removeClass("component-drop_down_menu_open_animation");
            }
        $("#component-main_content").addClass("component-drop_down_menu_close_animation");
        $("#component-main_content").css({"pointer-events":"auto"});
    });
    $("#green_email_one").click(function() {
        $("#green_email_one").addClass("component-footer_background_color__green_emails_when_clicked");
        var range = document.createRange();
        var selection = window.getSelection();
        range.selectNodeContents(document.getElementById('green_email_one'));
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('copy');
    });
    $("#green_email_two").click(function() {
        $("#green_email_two").addClass("component-footer_background_color__green_emails_when_clicked");
        var range = document.createRange();
        var selection = window.getSelection();
        range.selectNodeContents(document.getElementById('green_email_two'));
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('copy');
    })
    $("#grey_email").click(function() {
        $("#grey_email").addClass("component-footer_background_color__grey_email_when_clicked")
        var range = document.createRange();
        var selection = window.getSelection();
        range.selectNodeContents(document.getElementById('grey_email'));
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('copy');
    })
    $("#drop_down_menu_email").click(function() {
        $("#drop_down_menu_email").addClass("component-drop_down_menu__email_when_clicked");
        var range = document.createRange();
        var selection = window.getSelection();
        range.selectNodeContents(document.getElementById('drop_down_menu_email'));
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('copy');
    })
});

body {
    font-family: Arial, Helvetica, sans-serif;
}

h1,h2,h3,h4,h5,h6,p {
    margin: 0;
    color: #34302D;
    margin-bottom: 20px;
    font-weight: normal;
}

h1 {
    font-size: 30px;
}

h2 {
    font-size: 20px;
}

p {
    font-size: 18px;
    line-height: 30px;
}

a {
    font-size: 20px;
    color: #34302D;
    text-decoration: none;
    border-bottom: 1px solid white;
}

a:visited {
    color: #86C543;
    border-bottom-color: #86C543;
}

nav a:after {
    content: "";
    display: block;
    height: 0;
    width: 1px;
}

nav {
    line-height: 50px;
}

.component-surrounding_div {
    position: relative;
}

.component-drop_down_menu--variant-modifier {
    opacity: 0;
    margin: 5%;
    z-index: 10;
    width: 90%;
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    pointer-events: none;
}

#component-main_content {
    position: absolute;
    top: 0;
    left: 0;
}

.component-header__left-div__nav > a {
    font-size: 23px;
    border-bottom: none;
    color: #34302D;
}

.component-header__left-div__nav_active_a {
    color: #86C543 !important;
}

.component-div_margin {
    margin: 5% 5% 110px 5%;
}

#component-div_margin_projects_page {
    margin-bottom: 120px;
}

.component-div_margin__email_color {
    color: #86C543;
}

.component-div_margin_h2_after_description {
    color: #E6E6E6;
}

.component-header_green_bar {
    height: 2px;
    background-color: #86C543;
}

.component-div_margin__header_div {
    display: flex;
}

.component-header__left-div {
    width: 90%;
}

#component-description_div__h2 {
    font-size: 25px;
    line-height: 30px
}

.component-header__right-div {
    width: 10%;
}

#component-div_margin__social_p {
    margin-bottom: 10px;
}

.component-footer_background_color {
    background-color: #34302D;
    padding: 50px 5% 40px 5%;
}

.component-footer_background_color__email_border_color {
    border-bottom-color: #34302D;
    display: inline-block;
    margin-bottom: 20px;
}

.component-footer_background_color__div {
    margin-bottom: 50px;
}

.component-footer_background_color__first_div {
    margin-bottom: 60px;
}

.component-footer_background_color__h2 {
    color: #FFFFFF;
}

.component-footer_background_color__h2_after_first {
    font-size: 18px;
    margin-bottom: 15px;
}

.component-footer_background_color__p {
    margin-bottom: 0;
    line-height: 25px;
}

.component-footer_background_color__first_h2_margin {
    margin-bottom: 7px;
}

.component-footer_background_color__nav {
    line-height: 25px;
}

.component-footer_background_color__a {
    color: #E6E6E6;
    border-bottom: 1px solid #34302D;
    font-size: 17px;
}

.component-footer_background_color__a:visited {
    color: #E6E6E6;
    border-bottom-color: #E6E6E6;
}

.component-footer_background_color__green_emails_when_clicked {
    border-bottom-color: #86C543;
}

.component-footer_background_color__grey_email_when_clicked {
    border-bottom-color: #E6E6E6;
}

.component-drop_down_menu__email_when_clicked {
    color: #86C543 !important;
}

.component-footer_background_color__green_emails_when_clicked::selection,
.component-footer_background_color__grey_email_when_clicked::selection,
.component-drop_down_menu__email_when_clicked::selection {
    background-color: transparent;
    -moz-appearance: none;
}

.component-drop_down_menu_open_animation {
    animation-name: drop_down_menu_open;
    animation-fill-mode: forwards;
    animation-duration: .5s;
}

.component-drop_down_menu_close_animation {
    animation-name: drop_down_menu_close;
    animation-fill-mode: forwards;
    animation-duration: .5s;
}

.component-drop_down_menu_show_animation {
    animation-name: drop_down_menu_show;
    animation-fill-mode: forwards;
    animation-delay: .3s;
    animation-duration: .5s;
}

.component-drop_down_menu_hide_animation {
    animation-name: drop_down_menu_hide;
    animation-fill-mode: forwards;
    animation-duration: .5s;
}

@keyframes drop_down_menu_show {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes drop_down_menu_hide {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes drop_down_menu_open {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.01;
    }
}

@keyframes drop_down_menu_close {
    from {
        opacity: 0.01;
    }
    to {
        opacity: 1;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <!-- This is so viewing website is scaled well on all devices -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- This is where I am getting all my icons from -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
        <!-- Image by fontawesome.com. Here is link to image: https://fontawesome.com/icons/info-circle?style=solid -->
        <link rel="icon" href="Images/info-circle-solid.png">
        <!-- To remove default browser styling -->
        <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.0/normalize.css">
        <!-- My style sheet -->
        <link rel="stylesheet" href="css/style.css">
        <!-- JQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <!-- My script -->
        <script src="JavaScript/javascript.js"></script>
        <title>About</title>
    </head>
    <body>
        <!-- Div container to create drop-down menu overlay functionality -->
        <div class="component-surrounding_div">
            <!-- Drop-down menu -->
            <div class="component-drop_down_menu--variant-modifier" id="menu">
                <!-- Navigation -->
                <div class="component-header__left-div">
                    <nav class="component-header__left-div__nav">
                        <a href="index.html" class="component-header__left-div__nav_active_a">About</a>
                        <a href="projects.html">Projects</a>
                        <a href="javascript:;" id="drop_down_menu_email">chadwilson959@yahoo.com</a>
                    </nav>
                </div>
                <!-- Exit button -->
                <div class="component-header__right-div">
                    <i class="fas fa-times fa-3x" id="close_menu"></i>
                </div>
            </div>
            <!-- Main Content -->
            <div id="component-main_content">
                <!-- Green Bar -->
                <div class="component-header_green_bar"></div> 
                <header class="component-div_margin">
                    <div class="component-div_margin__header_div">
                        <div class="component-header__left-div">
                            <h1>Hi, I'm Chad.</h1>
                        </div>
                        <!-- Open menu button -->
                        <div class="component-header__right-div">
                            <i class="fas fa-bars fa-2x" id="open_menu"></i>
                        </div>
                    </div>
                </header>
                <!-- Intro section -->
                <div class="component-div_margin">
                    <h2 id="component-description_div__h2">I am an aspiring front-end web developer.</h2>
                    <p>I use my front-end web development skills to create beautiful and efficent websites.</p>
                    <p>I am also knowledgeable with back-end web development but front-end web development is my expertise.</p>
                </div>
                <!-- Projects section -->
                <div class="component-div_margin">
                    <h2 class="component-div_margin_h2_after_description">Projects</h2>
                    <p>Sorry, nothing to show here at the moment except for this website I built.</p>
                    <p>However, I am in the process of developing a prayer application with a group of other developers I worked with last summer during an internship that will soon be deployed!</p>
                </div>
                <!-- Resume section -->
                <div class="component-div_margin">
                    <h2 class="component-div_margin_h2_after_description">Resume</h2>
                    <div>
                        <p>Click the link below to view my resume.</p>
                        <div>
                            <a href="https://drive.google.com/file/d/1OZmiZXM1XlSSVFU3O_cojis07KVhB-dL/view?usp=sharing" target="_blank">Resume</a>
                        </div>
                    </div>
                </div>
                <!-- Social media section -->
                <div class="component-div_margin">
                    <h2 class="component-div_margin_h2_after_description">Social</h2>
                    <p id="component-div_margin__social_p">Here are links to my Linkedin and GitHub accounts.</p>
                    <nav>
                        <a href="https://www.linkedin.com/in/chad-wilson-b35160b6/" target="_blank">Linkedin</a>
                        <a href="https://github.com/chadwilson20" target="_blank">GitHub</a>
                    </nav>
                </div>
                <!-- Email section -->
                <div class="component-div_margin">
                    <h2 class="component-div_margin_h2_after_description">Contact</h2>
                    <p>Here is my email if you wish to contact me. Click on my email address below to copy the address to your clipboard.</p>
                    <a href="javascript:;" class="component-div_margin__email_color" id="green_email_one">chadwilson959@yahoo.com</a>
                </div>
                <!--Footer-->
                <footer class="component-footer_background_color">
                    <div class="component-footer_background_color__first_div">
                        <h2 class="component-footer_background_color__h2 component-footer_background_color__first_h2_margin">Chad Wilson</h2>
                        <a href="javascript:;" class="component-div_margin__email_color component-footer_background_color__email_border_color" id="green_email_two">chadwilson959@yahoo.com</a>
                        <p class="component-footer_background_color__a component-footer_background_color__p">I use my front-end web development skills to create beautiful and efficent websites.</p>
                    </div>
                    <div class="component-footer_background_color__div">
                        <h2 class="component-footer_background_color__h2 component-footer_background_color__h2_after_first">Menu</h2>
                        <nav class="component-footer_background_color__nav">
                            <a href="index.html" class="component-footer_background_color__a">About</a>
                            <a href="projects.html" class="component-footer_background_color__a">Projects</a>
                        </nav>
                    </div>
                    <div class="component-footer_background_color__div">
                        <h2 class="component-footer_background_color__h2 component-footer_background_color__h2_after_first">Contact</h2>
                        <a href="javascript:;" class="component-footer_background_color__a" id="grey_email">chadwilson959@yahoo.com</a>
                    </div>
                    <div>
                        <h2 class="component-footer_background_color__h2 component-footer_background_color__h2_after_first">Social</h2>
                        <nav class="component-footer_background_color__nav">
                            <a href="https://www.linkedin.com/in/chad-wilson-b35160b6/" target="_blank" class="component-footer_background_color__a">Linkedin</a>
                            <a href="https://github.com/chadwilson20" target="_blank" class="component-footer_background_color__a">GitHub</a>
                        </nav>
                    </div>
                </footer>
            </div>
        </div>
    </body>
</html>

如果您找不到我所说的链接，请告诉我。提前谢谢你。

Answer 1

完成复制后删除选择范围:

link.onclick = e => {
  e.preventDefault();
  var range = document.createRange();
  var selection = window.getSelection();
  range.selectNodeContents(link);
  selection.removeAllRanges();
  selection.addRange(range);
  document.execCommand('copy');
  // now clear the selection
  selection.removeAllRanges();
};

<a href="#" id="link">hello world</a>