LitElement点击函数执行两次
LitElement是一个轻量级的Web组件库，用于构建可重用的用户界面组件。它是基于Web组件标准的一种实现，提供了一种简单而强大的方式来创建自定义元素。
在LitElement中，当我们给一个元素添加点击事件处理函数时，有时会遇到点击函数执行两次的问题。这通常是由于事件冒泡和事件捕获机制导致的。
事件冒泡是指当一个元素上的事件被触发时，它会向上级元素传播，直到到达文档根元素。而事件捕获则是相反的过程，事件从文档根元素开始，逐级向下传播，直到到达触发事件的元素。
当我们给一个元素添加点击事件处理函数时，如果该元素的父元素也有相同的点击事件处理函数，那么点击事件会先触发父元素的处理函数，然后再触发子元素的处理函数，从而导致点击函数执行两次。
为了解决这个问题，我们可以使用事件修饰符@click来阻止事件冒泡或事件捕获。在LitElement中，可以通过在元素上添加@click=${(e) => e.stopPropagation()}来阻止事件冒泡，或者通过在元素上添加@click=${(e) => e.stopImmediatePropagation()}来阻止事件冒泡和事件捕获。
另外，还可以使用LitElement提供的其他功能来处理点击事件。例如，可以使用@click=${this.handleClick}来绑定一个类方法作为点击事件处理函数，或者使用@click=${() => this.handleClick()}来调用一个组件的方法。
总结起来，解决LitElement点击函数执行两次的问题可以通过以下几种方式：
- 使用事件修饰符
@click来阻止事件冒泡或事件捕获。 - 在点击事件处理函数中添加
event.stopPropagation()来阻止事件冒泡。 - 在点击事件处理函数中添加
event.stopImmediatePropagation()来阻止事件冒泡和事件捕获。 - 使用LitElement提供的其他功能来处理点击事件，如绑定类方法或调用组件方法。
对于LitElement的更多信息和示例代码，可以参考腾讯云的LitElement产品介绍页面：LitElement产品介绍
相关·内容
1回答
代码非常简单:我尝试将函数addContactFn()从MainComp传递给SideMenu。点击我就会得到错误
Uncaught : this.value.handleEvent不是函数
class MainComp extends LitElement {
constructor(){
super()
this.addContactFn = this.addContactFn.bind(this)
}
addContactFn() {
console.log("clicked");
}
浏览 1提问于2019-08-04得票数 1
回答已采纳
当一个元素被移除时，有没有一种方法来调度事件？我尝试了以下几种方法：
class MyElement extends LitElement {
constructor() {
super();
this.addEventListener('child-removed', this._handleChildRemoved);
}
render() {
return html`
<my-child-element></my-child-element>
`;
}
_handleChildR
浏览 10提问于2021-03-01得票数 0
<example name="One"></example>
<example name="Two"></example>
<example name="Three"></example>
下一个呈现如下所示：
<example name="Four"></example>
<example name="Three"></example>
LitElement将删除最后一个元素，并使用新属性更新前
浏览 4提问于2020-02-05得票数 4
回答已采纳
我的页面上有几个lit元素，但我不能将它们全部编译在一起，所以我想通过一个全局变量来“分享”lit内容。这可能有点不合常规，但现在它会为我节省很多字节。
我正在使用rollup进行打包。
我想我离实现我想要的已经很近了，但是我错过了一些东西…
这是我的组件..
@customElement('tab-strip')
export class TabStrip extends LitElement {
结果是
var tabstrip = (function (exports, litElement, repeat, classMap) {
//SOME OTHER STUFF
浏览 9提问于2020-11-24得票数 1
我想在构造函数中设置一个依赖于其他值的defalt值。
下面是模板，其中的类型值为：
class SelectOption extends LitElement {
static get properties() {
return {
type: {type: Array}
};
}
constructor() {
super();
this.type = ['1', '2'];
}
这或多或少是我想要的：
import { LitElement, html } from 'lit-element&#
浏览 0提问于2020-02-17得票数 0
1回答
我有一个照明组件。因此，目标是当按钮被点击时，我想显示一个带有模态弹出窗口的div。我怎么能这么做？这是我的代码：
import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';
@customElement('my-form')
export class CustomForm extends LitElement {
@property()
r
浏览 3提问于2022-10-06得票数 0
我正在使用聚合物LitElement，我试图传递一个函数给道具，但没有工作，这是我发现的工作方式，但它非常.有更好的建议吗？
import { LitElement, html, customElement, property } from 'lit-element';
@customElement('my-element')
export class MyElement extends LitElement {
onButtonClick = function name (){
console.log("Clicked!!")
}
浏览 6提问于2019-09-18得票数 4
回答已采纳
给定以下示例代码：
import { LitElement, html, css } from 'lit-element';
class ItemsDisplay extends LitElement {
static get styles() {...}
static get properties {...}
constructor () {
super();
...
}
render {
return html`
${this.items.map((ite
浏览 1提问于2019-02-25得票数 5
以下是聚合物的片段
import { LitElement, html } from 'lit-element'
class Component extends LitElement {
render () {
return html`<p>A paragraph</p>`
}
}
customElements.define('app-layout', Component)
我和这行return html`<p>A paragraph</p>`混在一起了
typeof html给了我functi
浏览 0提问于2019-07-30得票数 0
回答已采纳
1回答
如何在Lit-Element中找到一个HTML元素的宽度，我无法找到如何使用@query
import { LitElement, html, query } from 'lit-element';
class MyElement extends LitElement {
@query('#first')
first;
render() {
return html`
<div id="first">I want to know the size of this div</div>
浏览 1提问于2020-10-29得票数 3
我正在尝试对LitElement组件进行单元测试。当试图隔离组件时，我感到困惑的是如何实际使用存根元素。也就是说，我找不到一个解决办法，如何用空洞化的元素来代替适当的元素。
以单元测试为主题的聚合物项目提到了 i未能找到replace()函数的定义来查看实现细节。实际上，聚合物项目在"Create元素“标题中所描述的就是我要找的东西。
元素定义文件
export class AppElement extends LitElement {
render() {
return html`
<header-element class=&#
浏览 3提问于2021-02-16得票数 0
回答已采纳
我在一个litElement项目中工作，在一个组件中，我有一个属性需要映射到一个属性，并使用一个函数计算到另一个属性，如下所示： const calculateTwo(val) {
return `${val} ${val}`
}
class MyElement extends LitElement {
static get properties() {
return {
one: {
type: String,
attribute: 'foo',
},
two: {
t
浏览 26提问于2020-06-25得票数 0
回答已采纳
2回答
我目前正在学习如何使用lit-elements，而且我也是web开发方面的新手。我正在尝试制作一个蓝牙自定义元素，可以根据蓝牙设备是否连接来更改buton文本和颜色。 在我的litelement中，我创建了另一个名为BTLE的类，所有的蓝牙都在这个类中处理。但是我不知道如何将litelement属性传递给这个BTLE类。当BTLE类注意到connect或disconnet时，我希望我的按钮重新呈现。如果我通过构造函数通过BTLE类传递了一个属性，并更改了该属性，则按钮不会重新呈现。如果我更改了litelement类中的属性，它将被重新呈现。
浏览 28提问于2020-01-12得票数 1
回答已采纳
1回答
我正在使用LitElement创建一个web组件。这是来自的
// Import the LitElement base class and html helper function
import { LitElement, html } from 'lit-element';
// Extend the LitElement base class
class MyElement extends LitElement {
/**
* Implement `render` to define a template for your element.
*
浏览 0提问于2019-03-12得票数 32
回答已采纳
1回答
我正在使用LitElement和lit-html进行训练。我正在尝试用函数和事件侦听器来制作复杂的模板。我有一个模块用于模板模块，另一个模块用于我使用模板的一个组件。我在一个按钮的模板上遇到了问题，我将一个函数作为参数传递给它，当我点击按钮时，调用函数。这是可行的:它发出调用，但是this的引用丢失了。我认为可能的原因可能是箭头函数，所以我重写了函数，如下所示：
let timerElementOperation = function(operationTimer, operation,that){
operationTimer.bind(that);
return html`
浏览 0提问于2018-11-08得票数 0
2回答
我想通过CDN使用这个库。
我的js密码在这里。
import { LitElement, html } from "https://cdn.jsdelivr.net/npm/lit-element@2.1.0/lit-element.js";
class MyElement extends LitElement {
render(){
return html`ABCD`
}
}
customElements.define("my-element", MyElement)
我会跟随错误。
未解析的TypeError:未能解
浏览 0提问于2019-06-08得票数 13
1回答
我有三个组件：mainComponent、SideMenu和ContentArea (都是mainComponent的子组件)。我想让ContentArea看到popupOpen值的变化。
函数togglePopup()只需切换popupOpen布尔值。
更多细节:我将此函数作为属性从mainComponent传递给SideMenu。该函数更改了popupOpen值，，但此更改未反映在中
mainComponent
class mainComponent extends LitElement {
constructor(){
super()
this.p
浏览 5提问于2019-08-06得票数 0
我正在研究以下内容是否可行。
我的服务器端代码将驱动(Web)组件的数据序列化到JSON对象中，然后JSON对象可以作为字符串呈现到服务器生成的HTML中。我希望将这个字符串化的JSON对象传递到我的LitElement web组件中，并让我的LitElement组件自动地将字符串反序列化为一个本机JavaScript对象。
例如：
来自服务器的HTML将生成：
<my-lit-element myData="{\"hello\": \"world\"}"/>
我希望我的LitElement (使用类型记录)能够做以下事情：
@cus
浏览 2提问于2020-06-06得票数 2
我在LitElement和web组件方面的专业经验大约有一天了。我试着寻找一个答案，但还没有成功，当然我有最后期限。
我正在编写一个具有纯类型记录界面的组件库。出于所有的意图和目的，主机可以调用一个API方法来创建我的窗口的一个实例，给定一个HTMLElement作为父节点。我在一个文件中定义了一个基于LitElement的web组件：
// main-element.ts
import * as Lit from 'lit-element';
export class MainElement extends Lit.LitElement {
createRend
浏览 8提问于2020-12-03得票数 1
2回答
我是lit-element的新手，我想使用litelement创建一个模态组件，modal应该在页面加载时显示，并在20秒后自动关闭。
下面是我的代码片段：
import { LitElement, html } from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';
export class Modal extends LitElement {
connectedCallback(){
super.connectedCallback();
this.modalTimer(
浏览 1提问于2019-03-19得票数 1
在将几个发光组件迁移到v2 "lit": "2.1.1"之后，我们将收到以下类型记录错误：
类型‘type of MyComponent’的参数不能分配给'CustomElementConstructor‘类型的参数。类型'MyComponent‘中缺少’HTMLElement‘类型中的下列属性: accessKey、accessKeyLabel、auto大写、dir和275。
import { html, css, LitElement } from 'lit';
export default class MyComp
浏览 3提问于2022-01-12得票数 0
回答已采纳
1回答
我目前正在开发一个使用LitElement组件的应用程序。我想集成到它的传单，并有显示地图的问题。我已经在我的npm项目中安装了Leaflet，并创建了一个如下所示的类。
import {LitElement, html, css} from 'lit-element';
import './node_modules/leaflet/dist/leaflet';
class Map extends LitElement{
static get styles() {
return [css``];
}
construc
浏览 13提问于2021-03-12得票数 0
回答已采纳
源代码：
import { LitElement, html, css } from '../vendor/lit-2.4.0/lit-all.min.js';
export class SearchInput extends LitElement {
static get properties() {
return {
src: { type: String },
items: { type: Array }
}
};
static styles = css`
浏览 6提问于2022-10-29得票数 1
回答已采纳
当模板在单独的文件中定义时，无法调用组件中的函数。但是，如果模板是直接定义的，比如返回呈现htmlcall this.funct，那么它可以工作。在单独的文件中定义模板时如何调用函数。
Component.ts
import { LitElement, html} from 'lit-element';
import { cTemplate } from './template/ctemplate';
@customElement('card-form')
export class cardFormComponent extends LitEl
浏览 3提问于2020-04-25得票数 2
我有一个子组件，它接受一个属性(group)。子组件使用此属性作为url中的一个论证，以获取外部数据，然后将其呈现为一个列表。问题是，子组件在fetch返回之前完成呈现，使用来自上一次fetch的陈旧数据。
foods.js父组件，
import {LitElement, html} from "https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js";
import "./summary.js"
export class MyFoods extends LitElement {
_drop
浏览 4提问于2022-05-31得票数 0
回答已采纳
选择器类在css中定义：
static get styles() {
return css`
.selector select {
font-size: 1.125rem;
color: #fff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0 2rem 0 1rem;
width: 100%;
height: 100%;
...
}
我尝试将以下两行添加到我的LitElement中：
export class MyPattern exte
浏览 1提问于2021-05-03得票数 0
我有一个基本的文本点亮的web组件，带有红色的样式。
import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";
@customElement("bb-text")
export class Text extends LitElement {
render() {
return html` <p style="color: red;"><slot></slot>
浏览 11提问于2022-10-10得票数 0
回答已采纳
对于那些可能不知道Rails现在使用Webpacker的人来说，这是与Webpack的集成。有一个/packs目录将被转换为在html页面上使用：
<script src="/packs/bundle-06cd8a4ad388853ace59.js"></script>
我已经写了一个测试web组件。
import { LitElement, html } from 'lit-element';
class TestComponent extends LitElement {
render(){
return html`
浏览 27提问于2020-03-12得票数 1
我有两个组件:A和B。我想在模板中使用一个定制元素，我通过常规导入语句导入该元素，例如：
import {LitElement, html} from '@polymer/lit-element';
import B from "./b-element";
export class A extends LitElement {
...
render() {
return html`Here comes the element <b-element></b-element>`;
}
}
customElements.
浏览 2提问于2018-10-10得票数 0
回答已采纳
1回答
按钮在MainComp中切换布尔值。我想在两个嵌套的子组件中传播这个值。我的实际项目与第一级子项目一起工作，它无法更新第二级子组件。但是，奇怪的是，试图用codepen复制代码时，我注意到它也不适用于第一级的子级。
class MainComp extends LitElement {
constructor() {
super()
this.booleanValue = true
}
toggleBooleanValue() {
this.booleanValue = !this.booleanValue
浏览 0提问于2019-08-07得票数 0
回答已采纳
2回答
在LitElement WebComponent的道具/属性可用之前，我看不出有什么合适的理由来呈现它。如果模板需要一个支柱，您将被迫在第一个无用组件之后第二次呈现组件。更糟糕的是，如果组件看起来像：
class MyComp extends LitElement
static get properties() {
return {
myBigProp: {
type: Object
}
render() {
return html`<p> ${this.myBi
浏览 3提问于2020-01-09得票数 1
我们使用LitElement构建自定义组件(而不是公共组件)。我们把它叫做CompA和CompB。我们正在使用CDN发布包。
我们使用它在HTML中通过脚本标签的类型模块。当每个组件是页面上的唯一组件时，每个组件都可以正常工作。当我们在同一个页面上导入CompA和CompB时，我们就遇到了问题。
Uncaught :未能对‘CustomElementRegistry’执行'define‘：这个注册表中已经使用了名称“dom-模块”
我知道这个问题是由于在CompA和CompB中使用类似的UI组件而产生的。可能是纸输入纸按钮等等。
在使用CustomElementRegistry构建组件
浏览 0提问于2019-09-10得票数 4
回答已采纳
我看了一下开放式wc生成器。我可以生成web组件库和web组件应用程序，但生成的自述文件和文档中没有说明如何将web组件库导入到另一个库或应用程序中，以便库或应用程序可以将依赖项用作web组件。有没有我可以借鉴的使用open-wc构建的示例应用程序？
我主要兴趣是将几个web组件导入到不使用npm和rollup的遗留应用程序中。最好的方法是什么？
我想要做的事。我已经通过运行以下命令创建了一个库litelement-demo
npm init @open-wc
我用类似的方法创建了一个应用程序。在这两种情况下，我都选择使用typescript。libelement- README.md的dem
浏览 28提问于2021-03-08得票数 0
2回答
我正在寻找一个用LitElement构建的UI组件/模板库。我已经检查了Aybolit ()，但是它的组件数量非常有限。我需要一个像碳设计系统这样的库，但它是用LitElement构建的。
如果有任何库是轻量级，是用LitElement构建的，并且有相当多的组件可用，那么请建议。
浏览 4提问于2020-01-10得票数 3
import 'lit-flatpickr';
import { html, LitElement } from 'lit-element';
class MyApp extends LitElement {
getValue() {
this.shadowRoot.querySelector('#my-date-picker').getValue();
}
getSelectedDate(){
console.log('selected date');
}
render() {
return html<lit-fla
浏览 15提问于2021-03-02得票数 1
我已经制作了一个LitElement，它应该对数据库中的所有用户进行控制台日志记录。我用nodejs和mysql做到了这一点。我能够从数据库中获取用户并对他们执行console.log操作，但是获取数据的脚本会重复运行，这是它不应该做的。这是我的LitElement。 export class AllUsers extends LitElement{
static get properties(){
return {
users : {type : String},
numberOfUsers : {type : Nu
浏览 23提问于2020-12-17得票数 0
我正在尝试将LitElement集成到一个用于工作的项目中。它可以在所有浏览器上运行，除了修改后的火狐浏览器，它禁用了customElements。有什么办法可以绕过这个问题吗？如果我在about:config中打开它，要求用户激活它不是一个选项。
组件代码：
import {html, LitElement, property} from 'lit-element';
class MyElement extends LitElement {
@property({type: String}) myProp = 'stuff';
render() {
浏览 0提问于2019-04-16得票数 0
1回答
当页面第一次加载时，下面的代码生成的delete按钮可以正常工作。但是，如果您在其中一个<textarea>元素中更改文本，则删除按钮将不再正确工作。我怎么才能解决这个问题？
import { LitElement, html } from 'lit-element';
class MyElement extends LitElement {
static get properties() {
return {
list: { type: Array },
};
}
constructor() {
super();
浏览 3提问于2019-12-13得票数 4
回答已采纳
作为练习，给出html标记和一些重复(n)，我想插入n倍标记节点使用点燃元素web组件。我被堆放在这里：
import {LitElement, html, css} from 'lit-element';
export class WebComponent extends LitElement {
static get properties() {
return {
node: {type: String},
repetitions: {type: Number}
}
};
浏览 7提问于2020-07-16得票数 1
为了便于使用，我想制作一系列默认针对父组件中特定插槽的Lit web组件，这样我就不必每次想要使用这些子组件时都要写出slot属性。
在下面的示例中，我有一个包含触发器和内容组件的popover组件。触发器组件应该针对“触发器”插槽，而内容组件应该针对“内容”插槽。
我找到了用实现这一目标的方法，但还没有使用，这是我的公司正在使用的框架。
class Popover extends LitElement {
render () {
return html`
<div class="container">
浏览 15提问于2022-10-31得票数 1
回答已采纳
我正在学习lit-element，遇到了一个小问题，我试图设置从列表中删除项目的能力，但我无法获得项目的id，当我使用console.log测试它时，它是未定义的。我有三个组件，add-item.js，它可以将条目添加到运行良好的列表中。app.js是主要的组件，它处理页面的自动刷新以及页面的主要呈现，这就是我拥有addItem和removeItem的事件侦听器的地方。然后我有todo-item组件，这是我试图获取移除功能的ID的对象所在的位置。我对我在这里做错了什么感到不知所措，希望有人能看看并给我指出正确的方向这里是到目前为止的代码。 add-item.js 从‘lit-element’
浏览 65提问于2019-01-22得票数 0
我有一个带有的空数组，用来添加我用循环生成的2到13岁之间的年龄。我需要使用一个方法添加数组中的每个元素，但我不知道如何使其工作。这就是我所拥有的：
import { LitElement, html } from 'lit-element';
class ChildrenInput extends LitElement {
static get properties() {
return {
ages: {type: Array},
};
}
constructor() {
s
浏览 5提问于2020-02-17得票数 0
回答已采纳
有人能给我举一些简单的例子，从父类到子类发送道具吗？问题是：
父组件：
import { LitElement, html, css } from 'lit-element';
import './child.js';
class Parent extends LitElement {
constructor() {
super()
this.message = "hello world"
}
render() {
return html `<child-co
浏览 3提问于2020-09-17得票数 0
回答已采纳
我开始了一个基于LitElement的项目，有许多组件相互嵌套，假设我们有这样的结构： ? 根组件是my-app import { LitElement, html, customElement, query } from 'lit-element';
import './my-form';
import './my-view';
import { MyView } from './my-view';
@customElement('my-app')
export class MyApp extends
浏览 24提问于2019-06-23得票数 1
回答已采纳
import { LitElement, html } from 'lit-element';
class MyPublic extends LitElement {
render(){
return html`
<p>A paragraph</p>
`;
}
}
customElements.define('my-public', MyPublic);
我在MyPublic.js中定义了一个类似的公共web组件。然后当我需要在FooComponent.js中使用它时，我会导入MyPublic.
浏览 0提问于2019-08-17得票数 0
我想在我的角度应用中使用聚合体LitElement。
为此，我在我的应用程序的assets文件夹中创建了一个示例组件(assets)，并将其导入到index.html中。
test.js：
// Import the LitElement base class and html helper function
import { LitElement, html } from '../../../node_modules/lit-element/lit-element';
// Extend the LitElement base class
class Test extend
浏览 0提问于2019-02-25得票数 6
回答已采纳
我有以下组件，我的组件正确地显示来自appState的消息，但当我更改appState的值时，组件不会更新。我知道我需要添加一个@观察者，但是如何将它添加到LitElement？ import { LitElement, html } from 'lit-element';
import { observable } from "mobx";
var appState = observable({
message: 'World'
});
class MyElement extends LitElement {
handleCli
浏览 5提问于2019-09-26得票数 0
1回答
我似乎无法让主题与LitElement一起工作。我可以设置设置的其他道具没有问题，但主题没有被Twind识别。还值得一提的是，我在编译时没有出错。有人能快速解决吗？
import {LitElement, html} from 'lit';
import {setup, warn, create, cssomSheet} from 'twind';
setup({
mode: warn,
theme: {
colors: {
purple: '#2013',
},
},
});
const sheet
浏览 4提问于2022-03-08得票数 0
我已经用lit-实现了tinyMCE。编辑器呈现得很好，但事件永远不会触发。
import { LitElement, html, css } from 'lit-element';
import '@tinymce/tinymce-webcomponent';
render() {
return html`
<tinymce-editor
api-key="n***************************8"
@change=${()=>this.handleChang
浏览 3提问于2021-05-11得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
