click event in jQuery and right mouse clicking

Question

Does click trigger when right mouse button was clicked? I want to implement a right click kind of menu with full calendar, but it only has dayClick event, which I think is triggered only when left mouse button is clicked. I was thinking something like

dayClick: function(date, allDay, jsEvent){
    if (jsEvent.button === 1){
         //show menu
    }else{
        //do something with day
    }
}

but dayClick isn't triggered when right mouse is clicked....Any other ideas?

Check [this](http://stackoverflow.com/a/2725963/1777090) and [this](http://stackoverflow.com/a/706728/1777090) — MysticMagicϡ, Dec 16 '13 at 12:18
`$(document).on('contextmenu','.day',function(e){ e.preventDefault(); // code here });` — A. Wolff, Dec 16 '13 at 12:19
since jquery is in the tags, the suggestion from @A.Wolff seems the most direct and easiest. — Tim Seguine, Dec 16 '13 at 12:21

score 9 · Accepted Answer · answered Dec 16 '13 at 12:43

Try binding mousedown to each FullCalndar event in your eventRender event:

var events_array = [{
    title: 'Test1',
    start: new Date(2013, 11, 20)
}, {
    title: 'Test2',
    start: new Date(2013, 11, 21)
}];

$('#mycalendar:not(".fc-event")').on('contextmenu', function (e) {
    e.preventDefault()
})

$('#mycalendar').fullCalendar({
    events: events_array,
    header: {
        left: 'prevYear,prev,next,nextYear today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    eventRender: function (event, element) {
        element.bind('mousedown', function (e) {
            if (e.which == 3) {
                alert('Right mouse button pressed');
            }
        });
    }
});

You can disable right click on page and let it act only on events using:

$('#mycalendar:not(".fc-event")').on('contextmenu', function(e){ e.preventDefault() })

Demo: http://jsfiddle.net/IrvinDominin/3bukS/

I did use your approach, but binded every element with contextmenu preventing default. Thank you for your answers. — Apostolos, Dec 16 '13 at 13:59
@Smith I think it must be used a different approach, is better if you ask another question — Irvin Dominin, Mar 20 '14 at 07:43

score 3 · Answer 2 · answered Dec 16 '13 at 12:28

3

Your answer is No, click doesn't trigger when right mouse button is clicked, but you can try mousedown event, check this out:

jQuery(document.body).on("mousedown", function(event){
    if(event.button==2){
        //do what you want
    }
});

answered Dec 16 '13 at 12:28

Mehran Hatami

12,723
6
28
35

This might be diferent cross browsers – Henrique C. Dec 17 '13 at 09:03

score 0 · Answer 3 · answered Jul 27 '16 at 16:36

in my case, i do disable the right click context menu first:

$("#calendar").on("contextmenu",function (event) {
              event.preventDefault();
              });

then on the render event i add this:

  eventRender: function(event, element) {
...
 var event2=event;
     element.on('contextmenu', function (event) { showMenu(event2.start,event2,event.pageX,event.pageY); });
...
}

where ShowMenu is my own menu Div with options, in the same cursor position...

score 0 · Answer 4 · answered Jul 05 '17 at 04:30

Here is the my solution for handling right click event of full calendar.Edit dayMousedown function as follows on fullcalendar.js

dayMousedown: function(ev) {
        var view = this.view;

        // HACK
        // This will still work even though bindDayHandler doesn't use GlobalEmitter.
        if (GlobalEmitter.get().shouldIgnoreMouse()) {
            return;
        }
        switch (ev.which) {
            case 1:
                this.dayClickListener.startInteraction(ev);
                break;
            case 2:
                alert('Middle Mouse button pressed.');
                break;
            case 3:
                // here we can handle right click functionality 
                this.dayRightClickListener.startInteraction(ev);

                break;
            default:
                alert('You have a strange Mouse!');
        }

        if (view.opt('selectable')) {
            this.daySelectListener.startInteraction(ev, {
                distance: view.opt('selectMinDistance')
            });
        }
    }

And I implemented dayRightClickListener function to handle my requirement.

click event in jQuery and right mouse clicking

4 Answers4

Linked