Question

我在fabric.js上完成了我的网站，并且我发现了非常烦人的错误。

我已经为右键单击创建了一个处理程序，即打开上下文菜单。它在大多数情况下都能正常工作，但对于Safari和针对chrome的一些刺激，它会打开上下文菜单片刻，然后将其关闭。

出于某种原因，在contextmenu listener mouse.up事件仅在Safari 中触发 之后。

我需要以某种方式在contextmenu之后阻止mouse.up。

这是代码。

var activeObject = canvas.getActiveObject(); var activeGroup = canvas.getActiveGroup(); var objectInGroup = false; var relativeX = e.clientX; var relativeY = e.clientY; var offset = jQuery(this).offset(); var clickPoint = new fabric.Point(e.offsetX, e.offsetY); //debugger; var pointer = canvas.getPointer(e.originalEvent); var objects = canvas.getObjects(); for (var i = objects.length - 1; i >= 0; i--) { if (objects[i].containsInGroupPoint(clickPoint) || objects[i].containsPoint(clickPoint)) { console.log(i); if (activeGroup) { for (var y = 0, len = activeGroup._objects.length; y < len; y++) { if (activeGroup._objects[y]==objects[i]) { objectInGroup = true; } } } if (activeObject!=objects[i] && !objectInGroup) { canvas.deactivateAll(); canvas.setActiveObject(objects[i]); } break; } } if (i < 0) { } activeObject = canvas.getActiveObject(); //console.log(activeObject); if(activeObject == null && activeGroup == null){ var obj = canvas.getObject(); } console.log(obj); console.log(e.pageX + " - " + e.pageY); console.log(offset.left + " - " + offset.top); if(jQuery("#prozrachnost").is(':visible')){ jQuery("#prozrachnost").hide(); jQuery(".rect_books").hide(); jQuery(".cap_palitra").hide(); }else{ jQuery("#prozrachnost").css({ 'position':'absolute', 'top' : relativeY, 'left' : relativeX, 'width' : '171px', 'height' : 'auto', 'z-index': 1 }); jQuery("#prozrachnost").show(); var ch = jQuery('#prozrachnost').find('.button_menu_top').height(); var cw = jQuery('#prozrachnost').find('.button_menu_top').width(); jQuery('#prozrachnost').find('.button_menu_bottom').css({height:ch}); jQuery('#prozrachnost').find('.button_menu_center').css({ left : ((cw / 2) - (jQuery('#prozrachnost').find('.button_menu_center').width() / 2)) + 'px' }); var type = ''; jQuery('#prozrachnost .button_menu_top').hide(); jQuery('#prozrachnost .button_menu_bottom a').hide(); if(activeObject){ if(activeObject.get('myType') == 'text' || activeObject.get('myType') == 'image'){ jQuery('#prozrachnost .button_menu_top').show(); jQuery('#prozrachnost .button_menu_bottom a.del').show(); jQuery('#prozrachnost .button_menu_bottom a.palitra').show(); } if(activeObject.get('myType') == 'rect' || activeObject.get('myType') == 'captionborder'){ jQuery('#prozrachnost .button_menu_bottom a.books').show(); jQuery('#prozrachnost .button_menu_bottom a.del').show(); jQuery('#prozrachnost .button_menu_bottom a.palitra').show(); } type = activeObject.get('myType'); }else if (activeGroup){ if(activeGroup._objects[0].get('myType') == 'text' || activeGroup._objects[0].get('myType') == 'image'){ jQuery('#prozrachnost .button_menu_top').show(); jQuery('#prozrachnost .button_menu_bottom a.del').show(); jQuery('#prozrachnost .button_menu_bottom a.palitra').show(); } if(activeGroup._objects[0].get('myType') == 'rect' || activeGroup._objects[0].get('myType') == 'captionborder'){ jQuery('#prozrachnost .button_menu_bottom a.books').show(); jQuery('#prozrachnost .button_menu_bottom a.del').show(); jQuery('#prozrachnost .button_menu_bottom a.palitra').show(); } type = activeGroup._objects[0].get('myType'); } console.log(activeGroup); jQuery("#prozrachnost a.button_link").click(function(e){ e.preventDefault(); var activeObject = canvas.getActiveObject(); var activeGroup = canvas.getActiveGroup(); var btn = jQuery(this); var type = ''; if(activeObject) { type = activeObject.get('myType'); } else if (activeGroup) { type = activeGroup._objects[0].get('myType'); } if(btn.hasClass('books')){ if(type == 'rect'){ jQuery("#RECTBACK").click(); } if(type == 'captionborder'){ jQuery("#CAPBACK").click(); } } if(btn.hasClass('palitra')){ if(type == 'rect'){ jQuery(".cap_palitra").hide(); jQuery(".ttext_color").hide(); jQuery(".rect_books").show(); } if(type == 'captionborder'){ jQuery(".rect_books").hide(); jQuery(".ttext_color").hide(); jQuery(".cap_palitra").show(); } if(type == 'text'){ jQuery(".rect_books").hide(); jQuery(".cap_palitra").hide(); jQuery(".ttext_color").show(); } } if(btn.hasClass('del')){ if(type === 'text') { jQuery("#ITDEL").trigger('click'); } if (type === 'image'){ jQuery("#ITDEL").trigger('click'); } if(type === 'rect'){ jQuery("#RCBDEL").trigger('click'); } if (type === 'captionborder'){ jQuery("#RCBDEL").trigger('click'); } } }); } e.preventDefault(); }); // undo and redo buttons jQuery('#undo').click(function() { replay(w.undo, w.redo, '#redo', this); }); jQuery('#redo').click(function() { replay(w.redo, w.undo, '#undo', this); }); // undo and redo buttons 2 jQuery('#undo1').click(function() { replay(w.undo, w.redo, '#redo1', this); }); jQuery('#redo1').click(function() { replay(w.redo, w.undo, '#undo1', this); }); //disable rotation/scling on selected group canvas.observe('selection:created', function (e){ if (e.target.type === 'group') { e.target.hasControls = false; } }); canvas.on('mouse:up',function(option){ if(jQuery("#prozrachnost").is(':visible')){ jQuery("#prozrachnost").hide(); jQuery(".rect_books").hide(); jQuery(".cap_palitra").hide(); } //console.log('up'); if(option.target){ if (option.target == window.change_item) {window.change_item=option.target;} } if(option.target){ methods.active(option.target.get('myType'),option); } });

请有人给我一个线索。

以下是链接http://motivashka-board.ru/konstruktor.html

这就是上下文菜单的外观

提前致谢。

Answer 1

我自己解决了这个问题。我已经将禁用代码从mouse.up移到了mouse.down。

        if(jQuery("#prozrachnost").is(':visible')){
        jQuery("#prozrachnost").hide();
        jQuery(".rect_books").hide();
        jQuery(".cap_palitra").hide();
    }

这就是诀窍。

fabric.js的上下文菜单在Safari中不起作用

1 个答案: