Prevent contextual menu to be displayed in Paper JS

user_8881495 0
Viewed 182

I try to prevent contextual menu to be displayed on right click with Paperjs. I tried to catch the right click event with the following JS code:

window.addEventListener("contextmenu", function(event){
//document.body.addEventListener("contextmenu", function(event){
    console.log ('Right click');
    
    //event.stopImmediatePropagation();
    event.stopPropagation();
    
    return false;
    //return true;
});

I tried many combinations (commented lines). None is working. I can't figure out why it is not working, while the following line does the job:

<body oncontextmenu="return false;">

I can't add attribute to <body> so I would like to do in from the JavaScript.

Here is a JSFiddle: https://jsfiddle.net/Imabot/zujxaL95/5/

paperjs addeventlistener contextmenu javascript
1 Answers

You're looking for event.preventDefault()

window.addEventListener("contextmenu", function(event){
//document.body.addEventListener("contextmenu", function(event){
    console.log ('Right click');
    
    //event.stopImmediatePropagation();
    event.stopPropagation();
    event.preventDefault();
    return false;
    //return true;
});


//var canvas = document.getElementById("canvas");
paper.install(window);
paper.setup(canvas);


var c1 = new Path.Circle(new Point(200, 140), 100);
c1.fillColor = 'red';
c1.visible = true;
html,
body {
    margin: 0;
    overflow: hidden;
    height: 100%;
}


canvas[resize] {
    background:  #ccc;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin:0;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.11/paper-full.min.js"></script>
<canvas id="canvas" resize></canvas>

user_8288640
Related