个人中心
gpt4 book ai didi

javascript - 使用 CSS 类禁用 Select

转载 作者：行者123 更新时间：2023-11-28 03:15:56 25 4
gpt4 key购买 nike

我正在尝试获取一个简单的页面，其中包含调用单击事件来更改方框外观的按钮。我遇到的问题是 css “user-select: none;”不适用于我的按钮条。当快速连续单击按钮时，它们往往会被选中，这不利于页面的美观。我看到 CSS 类在开发工具中处于事件状态，并且我使用了来自一个流行的 Stack Overflow 问题的以下代码，该问题已被多次投票。

这是我的 CSS:

.noselect {
      -webkit-touch-callout: none; /*     iOS Safari */
        -webkit-user-select: none; /*     Safari */
         -khtml-user-select: none; /* Konqueror HTML */
           -moz-user-select: none; /*     Old versions of Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-
8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
        <script type="text/javascript">
           if              (navigator.userAgent.match(/iPad/i)) {
viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'width=980'); }
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" >.   </script>
    <title>Jiggle Into JavaScript</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.mi n.css" integrity="sha384- 1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css" type="text/css">
    <script type="text/javascript" src="Javascript.js"></script> </head>
    <body class="noselect">
    <p class="noselect textDescription">Press the buttons to
change the box!</p>
    <div class="centerBtns noselect">
    <button value="0" class="noselect btnStyle buttonfx doubletake btnText buttons" id="growBtn">Grow</button>
    <button value="1" class="noselect btnStyle buttonfx doubletake btnText buttons" id="shrinkBtn">Shrink</button>
    <button value="2" class="noselect btnStyle buttonfx doubletake btnText buttons" id="blueBtn">Blue</button>
    <button value="3" class="noselect btnStyle buttonfx doubletake btnText buttons" id="purpleBtn">Purple</button>
    <button value="4" class="noselect btnStyle buttonfx doubletake btnText buttons" id="fadeBtn">Fade</button>
    <button value="5" class="noselect btnStyle buttonfx doubletake btnText buttons" id="resetBtn">Reset</button>
    </div>
    <div id="box" class="boxStyle">.    
    </div> 
    </body>
    </html>

JS:

$(document).ready(function(){
    
    $('.buttons').click(function(){
        if($('.active').length){
            $('.active').not($(this)).removeClass('active').addClass('buttons');
        }      
        $(this).removeClass('buttons').addClass('active');     
        console.log("Button " + (this).id + " Is Now Active!")
    }); 
     
    $("#growBtn").on("click", function() { 
        $("#box").animate({height:"+=15px", width:"+=15px"}, "fast");
        // console.log("Grow Button Clicked!");
    })
  
    $("#shrinkBtn").on("click", function() { 
        $("#box").animate({height:"-=15px", width:"-=15px"}, "fast");
        // console.log("Shrink Button Clicked!");
    })
  
    $("#blueBtn").on("click", function() { 
        $("#box").removeClass("purpleBox");
        $("#box").addClass("blueBox");
        // console.log("Blue Button Clicked!");
    })
  
    $("#purpleBtn").on("click", function() { 
        $("#box").removeClass("blueBox");
        $("#box").addClass("purpleBox");
        // console.log("Purple Button Clicked!");
    })
  
    $("#fadeBtn").on("click", function() { 
        $("#box").fadeTo( "fast", Math.random() );
        // console.log("Fade Button Clicked!");
    })    
    
    $("#resetBtn").on("click", function() { 
        $("#box").removeClass("blueBox");
        $("#box").addClass("boxStyle");
        $("#box").animate({opacity: "1"}, "fast");
        $("#box").animate({height: "245px", width: "245px"}, "fast");
        // console.log("Reset Button Clicked!");
    })
})

我知道这个问题已经得到解决，但对于我的特定应用程序，问题仍然存在。有什么我可能错过的吗？

谢谢您。

I have edited this post to show that I am still able to select all text and buttons (as well as between the buttons).

最佳答案

问题很简单:我在编辑器中打开了不正确的“styles.css”文件，并在其中添加了该类，而不是预期的 styles.css 文件。

实际 CSS:

.boxStyle {
    height: 245px;
    width: 245px;
    background-color: rgb(139, 219, 215);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    background-image: 
        -webkit-radial-gradient(100% 10%,circle,rgb(214, 20, 166),transparent),  
        -webkit-radial-gradient(80% 50%,circle,rgba(29, 191, 191, 0.93),#1ba3e500),  
        -webkit-radial-gradient(10% 10%, 40em 40em,#3da3fa,transparent)
    ;
    border: 1px solid #000;
    border-radius: 10px;
}
.blueBox {
    background-image: 
        -webkit-radial-gradient(100% 10%,circle,rgba(54, 176, 247, 0.658),transparent),  
        -webkit-radial-gradient(80% 50%,circle,rgba(241, 245, 21, 0.945),#1ba3e500),  
        -webkit-radial-gradient(10% 10%, 40em 40em,#055daa,transparent)
    ;
}
.purpleBox {
    background-image: 
        -webkit-radial-gradient(100% 10%,circle,rgb(214, 20, 166),transparent),  
        -webkit-radial-gradient(80% 50%,circle,rgba(29, 191, 191, 0.93),#1ba3e500),  
        -webkit-radial-gradient(10% 10%, 40em 40em,#3da3fa,transparent)
    ;
}
.centerBtns {
    text-align: center;
}

.btnStyle {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
    font-weight: bold;
    color: black;
    border: 1px solid black;
    border-radius: 10%;
    opacity: .8;
    background-color: rgb(46, 115, 243);
    margin: 5px;
}
.btnText {
    color: black;
    opacity: 1;
}
.btnStyle:hover {
    opacity: 1;
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}

.growBoxAnimate {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}

.fade
{
    opacity: 0.5;
}

.buttonfx{
    color: black; 
    outline: none;
    background: transparent;
    letter-spacing: 0.0625em;
    padding: 7px 10px; 
    text-transform: uppercase;
    font: bold 16px 'Bitter', sans-serif; 
    line-height: 2;
    position: relative;
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    text-decoration: none; 
    overflow: hidden;
    transition: all .5s;
  }

  .buttonfx:before,
  .buttonfx:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: #107e8d; /* hover background color */
    z-index: -1;
    transform: translate3D(0,-100%,0);
    transition: all .5s;
  }

  .buttonfx:before{
    background: #fafcd6; /* default background color */
    z-index: -2;
    transform: translate3D(0,0,0);
  }
  .buttonfx:hover:after{
    transform: translate3D(0,0,0);
    transition: all .5s;
  }

.doubletake:before,
.doubletake:after{
  width: 200%;
  background: #18b8e0d7;
  transform-origin: 0 bottom;
  transform: translate3D(-50%,0,0) rotate(-50deg);
}

.doubletake:before{
  opacity: .4;
}

.doubletake:hover:before,
.doubletake:hover:after{
  transform: rotate(0deg);
  transition: all .25s;
}

.doubletake:hover:after{
  transition-delay: .25s;
}
.textDescription {
    text-align: center;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
    font: bold 22px 'Bitter', sans-serif; 
}
.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -moz-user-select: -moz-none;
}
.active {
  border: 2px solid #000;
}

关于javascript - 使用 CSS 类禁用 Select，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59651933/

25 4 0
文章推荐： html - Chrome 39.0.2171.95 固定位置问题
文章推荐： css - Sass，不同类的相同属性
文章推荐： html - 如何为移动设备缩放此视差中的背景图像？
文章推荐： twitter-bootstrap - 为 Moodle 创建自定义面包屑
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com