已解決430363個問題，去搜搜看，總會有你想問的

與按鈕單擊事件的 Web 組件交互

首頁猿問與按鈕單擊事件的 Web 組件交互

與按鈕單擊事件的 Web 組件交互

JavaScript

慕斯709654 2023-04-14 16:36:21

我有一個x-icicle我可以完全控制的自定義 HTML 元素，我想讓它與 HTML 按鈕（可以在 DOM 中的任何位置）交互，例如，每次按下按鈕時我都希望執行一些 JS在x-icicle。<button></button><x-icicle></x-icicle>class Icicle extends HTMLElement { // ... if (buttom_pressed) { // something }}customElements.define('x-icicle', Icicle);我不知道如何將按鈕事件發送到x-icicle。也許以某種方式設置回調？有什么提示嗎？

查看完整描述

2 回答

偶然的你

TA貢獻1841條經驗獲得超3個贊

您可以向自定義元素類添加一個方法

class Icicle extends HTMLElement {

connectedCallback() {

console.log('x-icicle element initiated')

}

listen(el) {

el.addEventListener('click', function() {

console.log('Button clicked')

})

}

customElements.define('x-icicle', Icicle)

document.querySelector('x-icicle').listen(document.querySelector('button'))

Button

</button>

<x-icicle></x-icicle>

反對回復 2023-04-14

紫衣仙女

TA貢獻1839條經驗獲得超15個贊

一個解決方案是使用CustomEvent

看看下面的例子（我用了一個簡單的span而不是你的自定義元素，但它會完全一樣）

const button = document.getElementById('button');

const span = document.getElementById('span');

button.addEventListener('click', evt => {

? ? span.dispatchEvent(new CustomEvent('myEvent'));

});

span.addEventListener('myEvent', evt => {

? ? span.innerHTML = 'button has been clicked';

});

<button id="button">button</button>

反對回復 2023-04-14

2 回答
0 關注
135 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

與按鈕單擊事件的 Web 組件交互

與按鈕單擊事件的 Web 組件交互

2 回答

添加回答