jQuery中的点击事件和右键点击

Question

当右键被点击时，单击会触发吗？我想在完整日历中实现右键菜单，但它只有dayClick事件，我认为只有在单击左鼠标按钮时才会触发。我正在考虑类似于以下内容：

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

但是当右键点击时，dayClick不会被触发...有其他的想法吗？

- Apostolos

---

你可以使用mousedown事件。 - Arun P Johny

请查看这个和这个。 - MysticMagicϡ

$(document).on('contextmenu','.day',function(e){ e.preventDefault(); // code here }); - A. Wolff

由于jQuery在标签中，@A.Wolff的建议似乎是最直接和最简单的。 - Tim Seguine

尝试使用http://dpaste.com/1507825/。 - Aamir Afridi

Answer 1

尝试在事件渲染中将 mousedown 绑定到每个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/

- Irvin Dominin

---

我使用了您的方法，但是将每个元素都绑定到上下文菜单并防止默认操作。谢谢您的回答。 - Apostolos

这个例子是关于事件的，那天的例子呢？ - Smith

@Smith 我认为需要采用不同的方法，最好是提出另一个问题。 - Irvin Dominin

Answer 2

您的答案是否定的，当右键点击时不会触发点击事件，但您可以尝试使用mousedown事件，查看以下内容：

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

- Mehran Hatami

---

这可能在不同的浏览器中有所不同。 - Henrique C.

Answer 3

这是我处理full calendar右键单击事件的解决方案。请在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函数来处理我的需求。

- Janith Widarshana

Answer 4

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

$("#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，具有选项，在相同的光标位置...

- Miguel