✨button in clickable paragraph

browser ⟩ event ⟩ propagation ⟩ stop ⟩ example ⟩ button in paragraph

if the button is right-clicked, the event will stop propagation to its enclosing paragraph.

💈範例

• replit > button in clickable paragraph

const {log} = console

// ⭐️ import
import { $ } from './js/ext/Node_ext.js'; // Node extension
// --------------------------------------------------------------------

// ⭐️ event handlers

// <button>
$('button').onmousedown = function(e) {
    log(`🐭`);
    // ⭐️ if right-clicked, stop event propagation.
    if (e.button === 2) e.stopPropagation();
};

// <p>
$('p').onmousedown = function() {
    log(`🅿️`);
};

📗 參考

• Eloquent JS ⟩ Ch. 15: Event Handling ⟩ Propagation

📘 手冊

• Event ⟩

  • preventDefault()

  • stopPropagation()

  • stopImmediatePropagation()