Question

我有button，受CSS的影响

button{
  margin:10rem ;
  width:10rem
}
button#package_select:focus
{
    border: 1px solid #fbd03c    !important;
    border-radius: 5px !important;
    outline:none;
    
}

<center>
  <button id ="package_select">select</button>
 </center>

工作正常。但是我的问题是

该按钮用于选择您是否还单击鼠标右键和左键。我只想在用户单击鼠标右键时选择按钮。

我们如何通过纯CSS实现这一目标？

Answer 1

CSS无法做到这一点，因为您甚至无法捕获单击的上下文菜单。因此，您需要使用JavaScript

document.getElementById("package_select").addEventListener('contextmenu', function(ev) {
    ev.preventDefault();
   this.className += "select_button";
    console.log("Added Button");
    return false;
}, false);

.select_button {
 border: 1px solid #fbd03c    !important;
 border-radius: 5px !important;
 outline:none;
}

<button id ="package_select">select</button>

Answer 2

要模拟focus动作，您必须使用2个功能

使用event.which == 3知道您是否单击了右侧，并用想要的样式在addClass到button上...。
使用window.addEventListener("click", function(event)删除focus（意味着删除您添加的类）

document.getElementById("package_select").onmousedown = function(event) {
    if (event.which == 3) {
        this.className += "select";
    }
}

window.addEventListener("click", function(event) {
  var elem=document.getElementsByClassName("select")[0];
  if(elem !=undefined)
     elem.className=""

});

    button{
      margin:10rem ;
      width:10rem
    }
   .select
    {
        border: 1px solid #fbd03c!important;
        border-radius: 5px!important;
        outline:none;
        
    }

<center>
      <button id ="package_select">select</button>
</center>

Answer 3

您不能使用纯CSS执行此操作。需要javascript的帮助（但不能保证在所有设备上都能正常运行。）

请检查基本示例代码：

<script>
(function() {
  // The code to run on document ready;
  disable_rclick_on_btn();
})();

function disable_rclick_on_btn() {
  document.getElementById('package_select').addEventListener("contextmenu", function(e){
    e.preventDefault();
  }, false);
}
</script>

右键单击应选择按钮

3 个答案: