jQuery中的单击事件和鼠标右键单击答案

【问题标题】：click event in jQuery and right mouse clickingjQuery中的单击事件和鼠标右键单击
【发布时间】：2014-01-03 20:02:35
【问题描述】：

单击鼠标右键时是否触发单击？我想实现一个带有完整日历的右键菜单，但它只有 dayClick 事件，我认为只有在单击鼠标左键时才会触发该事件。我在想类似的东西

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

但是当单击鼠标右键时不会触发 dayClick....还有其他想法吗？

【问题讨论】：

你可以使用 mousedown 事件
检查this和this
$(document).on('contextmenu','.day',function(e){ e.preventDefault(); // code here });
由于 jquery 在标签中，@A.Wolff 的建议似乎是最直接和最简单的。
试试dpaste.com/1507825

标签： jquery fullcalendar right-click

【解决方案1】：

尝试将mousedown 绑定到您的eventRender 事件中的每个FullCalndar 事件：

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');
            }
        });
    }
});

您可以禁用页面上的右键单击并让它只对事件起作用：

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

演示：http://jsfiddle.net/IrvinDominin/3bukS/

【讨论】：

我确实使用了您的方法，但是将每个元素与 contextmenu 绑定在一起以防止默认值。谢谢你的回答。
这个例子是事件，那一天呢？
@Smith 我认为它必须使用不同的方法，如果你问另一个问题会更好

【解决方案2】：

你的答案是否定的，点击鼠标右键时不会触发点击，但你可以试试mousedown事件，看看这个：

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

【讨论】：

这可能是不同的跨浏览器

【解决方案3】：

在我的情况下，我首先禁用右键单击上下文菜单：

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

然后在渲染事件中添加：

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

其中 ShowMenu 是我自己的带有选项的菜单 Div，位于相同的光标位置...

【讨论】：

【解决方案4】：

这是我处理完整日历右键事件的解决方案。在fullcalendar.js上编辑dayMousedown函数如下

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')
            });
        }
    }

我实现了dayRightClickListener 函数来处理我的要求。

【讨论】：