首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

e.target和htmlelement不能比较有什么原因吗?

e.target和HTMLElement不能直接比较的原因是它们属于不同的数据类型。

e.target是一个事件对象属性,用于表示触发事件的元素。它可以是任何类型的元素,包括HTML元素、SVG元素或其他类型的元素。

HTMLElement是一个特定的接口,表示HTML元素。它是DOM API的一部分,提供了操作和访问HTML元素的方法和属性。

由于e.target和HTMLElement属于不同的类型,它们的比较会导致类型不匹配的错误。在编写代码时,应该根据具体的需求和逻辑来处理它们,而不是直接进行比较。

如果需要判断e.target是否是HTMLElement类型的元素,可以使用instanceof运算符来进行类型检查。例如:

代码语言:txt
复制
if (e.target instanceof HTMLElement) {
  // 处理HTMLElement类型的元素
} else {
  // 处理其他类型的元素
}

这样可以确保在处理e.target时不会出现类型错误。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 【设计模式】我这样学习设计模式-发布订阅者模式

    一个例子理解 普通程序员张三去书店买书 张三:请问有红宝书? 店员:没有。 一小时后····· 张三:请问有红宝书? 店员:没有。 一小时后····· 张三:请问有红宝书?...发布订阅者模式程序员李四去书店买书 李四:请问有红宝书? 店员:没有。 李四:我要订阅(on)这本书,当书有货的时候,请给我打电话(emit),我就会过来买书(message)。...当我们在添加一个 todo 的时候,会声明一个 handlerFn 函数,在函数体中分别执行操作数据操作 dom 的操作。.../todoList'; class TodoDom { private oTodoList: HTMLElement; constructor(oTodoList: HTMLElement)...为所有的删除按钮添加一个删除事件 list.addEventListener( 'click', (e: MouseEvent) => { const tar = e.target

    61630

    刚学会 TypeScript, 顺手做个贪吃蛇小游戏

    页面布局 做一个简单的布局,这里主要采用的是 less flex 布局结合 比较有意思的几点 在布局时,采用了全局变量 bg-color 来定义全局颜色,为代码增加了更多的可扩展性 @bg-color...,以及达到多少分升级 class ScorePanel { // 记录分数等级 score = 0; level = 1; // 分数等级的元素 scoreEle...: HTMLElement levelEle: HTMLElement // 设置一个变量的限制等级 maxLevel: number // 设置一个变量 表示多少分时升级...这避免了额外的序列化步骤,使其直接使用 innerHTML 操作更快。 指定位置有以下几个 'beforebegin':元素自身的前面。...掉头检测 由于我们的蛇不能掉头,因此我们需要判断以下用户想反向走时,对这个事件进行处理 我们继续在设置值的函数中添加代码 首先只有一个身体的时候,我们是不需要考虑的,因此我们先要判断是否有第二个蛇身的存在

    39210

    刚学会 TypeScript, 顺手做个贪吃蛇小游戏

    页面布局 做一个简单的布局,这里主要采用的是 less flex 布局结合 比较有意思的几点 在布局时,采用了全局变量 bg-color 来定义全局颜色,为代码增加了更多的可扩展性 @bg-color...,以及达到多少分升级 class ScorePanel { // 记录分数等级 score = 0; level = 1; // 分数等级的元素 scoreEle...: HTMLElement levelEle: HTMLElement // 设置一个变量的限制等级 maxLevel: number // 设置一个变量 表示多少分时升级...这避免了额外的序列化步骤,使其直接使用 innerHTML 操作更快。 指定位置有以下几个 'beforebegin':元素自身的前面。...掉头检测 由于我们的蛇不能掉头,因此我们需要判断以下用户想反向走时,对这个事件进行处理 我们继续在设置值的函数中添加代码 首先只有一个身体的时候,我们是不需要考虑的,因此我们先要判断是否有第二个蛇身的存在

    37840

    【万字长文】TypeScript入门指南

    比如,你有一个数组,它包含了不同的类型的数据unknown类型unknown类型any类型更安全就像所有类型都可以被归为 any,所有类型也都可以被归为 unknown。...B extends A{ age:number}let p:B{ name:"有看到叶秋学长的裤子?"...javascript 其他语言不同,其不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间,那我们操作啥呢? 实际上,是操作对象的引用,引用类型的值是按引用访问的。...this 关键字静态方法不能调用非静态方法,反之可以父子类中静态非静态的关系对于非静态属性,子类可以继承父类非静态属性,但是当父子类出现相同的非静态属性时,不会发生子类的重写并覆盖父类的非静态属性,...而是隐藏父类的非静态属性对于非静态方法,子类可以继承并重写父类的非静态方法对于静态属性,子类可以继承父类的静态属性,但是如何非静态属性一样时,会被隐藏对于静态方法,子类可以继承父类的静态方法,但是不能重写静态方法

    50742

    做了点SQL题。

    “请问有SQL或者数据分析的面试题?” 说实话,我真没刷过题,上上周群里有朋友问了一道sql题,那种难度级别已经够你面任何一家公司了。所以,没做出来也很正常,我之所以会做也只是因为用的多而已。...再套路一点的问题无非就是,"为什么hive select count distinct 查询的reduce一直卡在99%,这可能是什么原因导致的,你有什么解决方法"。...对分析师来说,熟知业务的重要性远比你会一两个工具重要,而论重要性,SQL的重要性Python重要的多(这里不是让你不去学Python哈,宝器每天也还是要写写Python的)。再配一张有趣的图: ?...比较有趣的是,每次你提交代码对了会给你一个笑脸,如下: ? 每做完一个章节的题,还附带一个选择题小测验,不错的一个功能~ ?

    61130

    BetterScroll源码阅读顺便学习TypeScript

    既然目前我的痛点是看源码看不懂,那不如就在看源码的过程中遇到不懂的TypeScript语法再去详细了解,这样可能单纯看文档更有效,接下来我将在阅读BetterScroll源码的同时恶补TypeScript...type ElementParam = HTMLElement | string type意为类型别名,相当于给一个类型起了一个别名,不会新建类型,是一种引用关系,使用的时候接口差不多,但是有一些细微差别...,所以这个关键字如果用在constructor上,那么这个类只能被继承,自身不能被实例化。...对于上面这个示例,它把成员的声明初始化合并在构造函数的参数里,称作参数属性: constructor(public wrapper: HTMLElement) class Scroller {...初始信息计算 获取计算尺寸信息的在new Behavior的时候,构造函数里会执行refresh方法,我们以scrollBehaviorY的情况来看: refresh(content: HTMLElement

    61220

    【Web技术】264- Web Component可以取代你的前端框架

    slot.addEventListener('slotchange', e => { const changedSlot = e.target; console.log(changedSlot.assignedNodes...扩展原生元素 到目前为止,我们一直在扩展HTMLElement来创建一个全新的HTML元素。自定义元素还允许使用扩展原生内置元素,支持增强已经存在的HTML元素,例如imagesbuttons。...注意,在扩展现有元素时,不能使用Shadow DOM。这只是一种扩展原生HTML元素的方法,它继承了所有现有的属性、方法事件,并提供了额外的功能。...示例 #2 material-webcomponents 通过使用自定义元素实现Google的Material Design Github So,我应该抛弃我的框架? 当然,这要视情况而定。...清晰定义的工作方式样式指南简单的使用框架更有助于代码库的一致性。框架也带来了额外的复杂性,问问自己这是否真的值得。

    2.6K30

    用不了多久 Web Component,就能取代你的前端框架

    slot.addEventListener('slotchange', e => { const changedSlot = e.target; console.log(changedSlot.assignedNodes...扩展原生元素 到目前为止,我们一直在扩展HTMLElement来创建一个全新的HTML元素。自定义元素还允许使用扩展原生内置元素,支持增强已经存在的HTML元素,例如imagesbuttons。...注意,在扩展现有元素时,不能使用Shadow DOM。这只是一种扩展原生HTML元素的方法,它继承了所有现有的属性、方法事件,并提供了额外的功能。...示例 #2 material-webcomponents 通过使用自定义元素实现Google的Material Design Github So,我应该抛弃我的框架? 当然,这要视情况而定。...清晰定义的工作方式样式指南简单的使用框架更有助于代码库的一致性。框架也带来了额外的复杂性,问问自己这是否真的值得。

    2.2K40

    这一次,彻底解决滚动穿透

    在Android的手q微信中使用的是X5内核,它是基于blink内核的,因此同样有关于 passiveevent的优化。...假如我们的浮层上真的需要滚动事件,就不能阻止这些元素的默认行为。 浮层上面的滚动元素?...) =>      el.contains(e.target),    );    if (isExclude) {      return true;    }    e.preventDefault...这样一来只需要在可滚动的容器上加入 can-scroll类名即可滚动,但是这种滚动又随之带来一个问题: 当滚动到元素顶部底部再继续滚动时,又会触发滚动穿透!...对此,我们必须要在边界条件时阻止滚动: // 监听所有可滚动元素的滚动事件[].forEach.call(scrollEl, (el: HTMLElement) => {  let initialY =

    2.7K21

    在腾讯的第七个两年

    不知怎么大家开始关注起『死亡』,原来还在担心30岁之后还能不能写代码,后面变成35岁能不能有工作,再后来就是不知道什么时候实然就『猝死』了。怕死就不会死?那有什么好担心的呢?...不是说别人不能做,能不能做是一部分,愿不愿意做是另一部分。当然是不是自愿可能也是问题。 面试过不少前端的同学,我总会问到一个问题:『你是因为什么原因选择走前端这条路的?』...得到的回答基本上可以概括为:『前端所见即所得,觉得比较有成就感』、『前端变化比较快,能学到比较新的东西』,我自己也是差不多的原因。...比较有争议的是部分表现的实现是需要借助js5来实现的,这使得无法简单的以使用哪一类开发语言来区分重构前端,也就是边界模糊的问题,而不管哪一边,剥离了这部分的js,都将变得更加的『简单』,不够『酷』。...『全栈』是出路?『成也风云,败也风云』!送上一张图——技术S曲线,希望能更客观的看待各种技术的出现消失,不是技术本身的问题,是环境在不断的发展。

    31310

    【兼容性】H5滚动穿透解决方案

    小东西快快学快快记,大知识按计划学,不拖延 滚动穿透相信大家平常开发的时候也经常遇到,网上也有很多解决办法 今天我就谈下我对 滚动穿透的理解 总结下我们大佬写的一个比较完美的解决方案 不废话,本文分为...document 不可滚动 1body overflow hidden html, body { overflow: hidden; } PC 可以,但是对移动端无效 那么我们限制body不超过一屏,那么自然就不能滚动了...excludeEl = document.querySelectorAll(".can-scroll"); const isExclude = [].some.call(excludeEl, (el: HTMLElement...) => el.contains(e.target) ); if (isExclude) { return true; } e.preventDefault...modal").addEventListener("touchmove", (e) => { e.stopPropagation(); }); 虽然document 取消了默认事件,本来整个页面都不能滚了

    5.9K20

    Swift Reference Cycle中的weak,unowned,Closure Capture List

    信用卡」的lifetime一样,或者「信用卡」更长 unowned let customer: Customer // 有「信用卡」,就一定有「客户」,所以这里不能用Optional Type...之所以叫unowned,可能是因为「Customer」可以拥有(own)「CreditCard」,但是「CreditCard」不能拥有(does not own )「Customer」(或者是:除了指定...「客户」的「信用卡」); weak属性,初始化后也可以为nil; unowned属性,初始化后一定都有值; weakunowned更安全(原因见「不同点」第一条); unownedweak性能好一点点...可以看到,实例化一个HTMLElement对象后:asHTML属性指向closure,而closure因为capture了self,也指向HTMLElement对象(self),最后造成Reference...实例,就会Reference Cycle var paragraph: HTMLElement?

    1K30

    面试官问你“有什么问题问我吗?”,你该如何回答?

    我还记得当时我去参加面试的时候,几乎每一场面试,特别是HR面高管面的时候,面试官总是会在结尾问我:“问了你这么多问题了,你有什么问题问我吗?”。这个时候很多人内心就会陷入短暂的纠结中:我该问?...除非你另外一个人在能力上相同,但是只能在你们两个人中选一个,那么这个问题才对你能不能拿到offer至关重要。有准备总比没准备好,给面试官留一个好的影响总归是没错的。...能不能问一下,你当时因为什么原因选择加入这家公司的呢或者说这家公司有哪些地方吸引你?有什么地方你觉得还不太好或者可以继续完善?...接下来我会有一段空档期,有什么值得注意或者建议学习的? (体现出你对工作比较上心,自助学习意识比较强。) 这个岗位为什么还在招人? (岗位真实性价值咨询) 大概什么时候能给我回复呢?...你问这个问题,会让他感觉你是一个对他的部门比较上心,比较有团体意识,并且愿意倾听的候选人。) 公司对新入职的员工的培养机制是什么样的呢?

    1.9K30

    Vite Plugin Just so so

    由于我们可能会在pc端移动端重复使用Logo,使用SVG解决了潜在的可伸缩性问题。 插图。SVG非常适合图表任何依赖简单线条的插图。 动画元素。...最后,SVG通常其他格式的高分辨率等效文件小得多。从理论上讲,这意味着我们可以减少一些页面大小并减少加载时间。但是,除非我们计划将大多数图像转换为SVG,否则性能提升可能会很小。...之前我们说过,我们要将symbolElement都放置到统一的svg中,此时我们就需要用一个变量(symbols)进行收集这些转换完成的symbolElement import { globSync...准备工作 在上一节中,我们不是创建了一个Node项目,然后在项目的根目录下新建了一个mergeSvgToSprite.ts,现在我们将mergeSvgToSprite.ts移动到src目录下,并且在src...其实吧,也就是修改一些参数返回类型。话不多少,我们直接上代码。

    11610
    领券