How to prevent right click in Salesforce Lightning Web Component?

How to prevent right click in Salesforce Lightning Web Component?

preventDefault() on the contextmenu event can be used to prevent right click in Salesforce Lightning Web Component.

Sample Lightning Web Component:

HTML:

<template>
    <lightning-card>
        <div class="slds-m-around_medium">
            Testing
            <lightning-input
                label="Text"
                type="text">
            </lightning-input>
        </div>
    </lightning-card>
</template>

JavaScript:

import { LightningElement } from 'lwc';

export default class SampleLightningWebComponent extends LightningElement {

    constructor() {

        super();
        this.template.addEventListener(
        "contextmenu", 
        event => event.preventDefault()
        );

    }

}

js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>60.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

Leave a Reply