Replace usage of alert() in mouseEvent

[AnilSeervi]

Fixes portion of #7566

[github-actions]

Preview URLs

• https://pr7778.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/MouseEvent

Flaws

URL: /en-US/docs/Web/API/MouseEvent
Title: MouseEvent
on GitHub
Flaw count: 1

• macros:
  • /en-US/docs/Web/API/MouseEvent/mozPressure does not exist

External URLs

URL: /en-US/docs/Web/API/MouseEvent
Title: MouseEvent
on GitHub

No new external URLs

(this comment was updated 2021-08-10 12:54:07.506858)

[teoli2003]

Are you sure the demo is working? I can't get canceled to be displayed in the output field.

[AnilSeervi]

Are you sure the demo is working? I can't get canceled to be displayed in the output field.

May I know how canceled triggered in the previous example.

[teoli2003]

I don't know how the original example was working and I think that focusing on the cancelation doesn't bring much.

How about doing this:

<p><label><input type="checkbox" id="checkbox"> Checked</label></p>
<p><button id="button">Click me to send a MouseEvent to the checkbox</button></p>

and

function simulateClick() {

  //Get the element to send a click event to
  let cb = document.getElementById("checkbox"); 
  
  //Create a synthetic click MouseEvent
  let evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window
  });

  // Send the event to the checkbox element
  cb.dispatchEvent(evt);
 
}

document.getElementById("button").addEventListener('click', simulateClick);

I think it demonstrates the feature better, and does not make use of alert().

[AnilSeervi]

Yes, this looks okay.
Will Change to just dispatching the event.