Отключение выбора с помощью CSS класса - PullRequest
Новая
       1

Отключение выбора с помощью CSS класса

1 голос
/ 08 января 2020

Я пытаюсь получить простую страницу с кнопками, которые вызывают события щелчка, чтобы изменить внешний вид квадратного блока. У меня проблема в том, что css «user-select: none;» Не работает для моей полосы кнопок. Когда кнопки нажимаются в быстрой последовательности, они, как правило, выбираются, и это плохо для эстетики c страницы. Я вижу, что класс CSS активен в инструментах разработки, и я использовал следующий код из популярного вопроса переполнения стека, который неоднократно поднимался.

Вот мой 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).

1 Ответ

0 голосов
/ 08 января 2020

Проблема была проста: у меня был неправильный файл 'styles. css', открытый в моем редакторе, и я добавил класс вместо предполагаемых стилей. 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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...