Tips for implementing jquery to add a class to a div element when right-clicking

Question

Tips for implementing jquery to add a class to a div element when right-clicking

Click Actions

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

Mouse Clicks

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

My goal is to use Jquery to add a class on left click and another class on right click. The left click functionality is working, but the right click class addition is not functioning properly.

Is it possible to add a class on right click using Jquery?

jquery html css

Answer 1

Answer №1

When you want to trigger an action on right-click, you should use the event name contextmenu:

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

Answer 2

When you want to trigger an action on right-click, you should use the event name contextmenu:

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

Answer 3

Answer №2

Follow these steps:

HTML --

<div id="demo">
    demo demo
</div>

CSS --

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

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

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

JQUERY --

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

    $("#demo").click(function() {
      $( this ).removeClass("class-secondary").addClass("class-primary");
    });

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

That's all! Check out the demo: http://jsfiddle.net/ag62dyry/1/

Answer 4

Follow these steps:

HTML --

<div id="demo">
    demo demo
</div>

CSS --

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

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

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

JQUERY --

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

    $("#demo").click(function() {
      $( this ).removeClass("class-secondary").addClass("class-primary");
    });

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

That's all! Check out the demo: http://jsfiddle.net/ag62dyry/1/

Answer 5

Answer №3

If you want to experiment with a different approach, consider the following suggestion:

$(document).ready(function () {
    $("div").mousedown(function (e) {
        $(this).toggleClass("class-two");
        if (e.button == 2) {
            alert('Right mouse!');
            //feel free to insert your custom code for right mouse click actions here
        }
    });
});

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 6

If you want to experiment with a different approach, consider the following suggestion:

$(document).ready(function () {
    $("div").mousedown(function (e) {
        $(this).toggleClass("class-two");
        if (e.button == 2) {
            alert('Right mouse!');
            //feel free to insert your custom code for right mouse click actions here
        }
    });
});

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>

Tips for implementing jquery to add a class to a div element when right-clicking

Answer №1

Answer №2

Answer №3

Similar questions

What could be the reason for the lower section of my website not being displayed?

How to retrieve and delete a row based on the search criteria in an HTML table using jQuery

Loading SVG images in advance

The URL in an AJAX request includes a repeating fragment due to a variable being passed within it

Transfer the cropped image to the database through AJAX on the client side and PHP on the server side

Update the text on a button using a different button

Error: Label out of place in Material-UI Select

Switching the loading order of jQuery and AngularJS to load jQuery after AngularJS

When utilizing *NgIf, the button will be shown without the accompanying text being displayed

minimize the size of the image within a popup window

Utilizing objects from a JSON file within an HTML document

Arrange radio buttons vertically in a table

The changes made to jqGrid select editOptions may not reflect immediately

Creating an autocomplete feature with just one input field to display information for two to three additional input fields

Changing the background color of required inputs that are empty using jQuery

Tips for eliminating delays in removing CSS transitions

Customizing the layout of div elements with Twitter Bootstrap for a responsive design

Using jQuery to dynamically add a class to elements that have tab focus

Use jQuery to dynamically capture and store the value of data-rowindex into an array

The autocomplete attribute is not compatible with GroceryCrud functionality