如何在右键单击时将类添加到 div [重复]

Question

左键点击

$(document).ready(function(){
    $( "div" ).click(function() {
      $( this ).toggleClass( "class-one" );
     //alert('left click');
    });
});

右键点击

$(document).ready(function(){
    $( "div" ).click(function() {
      $( this ).toggleClass( "class-two" );
     //alert('Right Click');
    });
});

这是我的要求 Jquery 鼠标左键单击添加一个类，鼠标右键单击添加另一个类，所以我的任务左键单击添加类完成，右键单击添加类不起作用，

如果可以的话右击 Jquery ？

Answer 1

这样做：

HTML --

<div id="test">
    test test
</div>

CSS --

div {
    width: 300px;
    height: 200px;
    background-color: #99EAEA;
}

.class-one {
    background-color: #EAEAEA;
}

.class-two {
    background-color: #EA3355;
}

JQUERY --

$(document).ready(function(){ 
    document.oncontextmenu = function() { return false; };

    $("#test").click(function() {
      $( this ).removeClass("class-two").addClass("class-one");
    });

    $(document).mousedown(function(e){ 
        if( e.button == 2 ) { 
            $("#test").removeClass("class-one").addClass("class-two");
            return false; 
        } 
        return true; 
    });  
});

就是这样！演示：http://jsfiddle.net/ag62dyry/1/

Answer 2

你可以试试这个：

$(document).ready(function () {
    $("div").mousedown(function (e) {
        $(this).toggleClass("class-two");
        if (e.button == 2) {
            alert('Right mouse!');
            //here goes the code you want to add in mouse right click
        }
    });
});

div {
    height:100px;
    width: 100px;
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

Answer 3

右键事件名称为contextmenu:

$("div").on("contextmenu", function() {
    $(this).toggleClass("class-two");
});