Angular 8 ctrlKey和metaKey等效吗？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

图形编辑器开发：快捷键的管理

用原生事件，我们要这样写： window.addEventListener('keydown', (e) => { const { ctrlKey, shiftKey, altKey, metaKey...快捷键高级能力原生事件和一些常见的快捷键库可以处理一些简单的场景，但图形编辑器的场景往往更复杂。...所以我换成了一个对象：{ CtrlKey: true, keyCode: 'KeyC' }。不用解析，不用转换，直接和 event 的属性对比即可。这个是精准匹配，即不能有多余的修饰键。...( ctrlKey == e.ctrlKey && shiftKey == e.shiftKey && altKey == e.altKey && metaKey...图形编辑器：工具管理和切换图形编辑器：底层设计图形编辑器：防误操作之拖拽阻塞

3684 1

你的 Link Button 能让用户选择新页面打开吗？

有2个问题需要解决：4.3.1 样式问题和样式是有差异的。产品形态上希望用按钮，我们就不能用超链接样式。...visited, a:hover, a:active { color: inherit; text-decoration: none;}4.3.2 JS逻辑问题如果导航，需要其它JS逻辑，就无法只用和href...== 0) return; if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return; event.preventDefault...event.xxxKeyevent.ctrlKey: MAC上表示Control键，Windows上表示Ctrl键。...event.metaKey: MAC上表示Command键，Windows上表示Windows键。event.shiftKey: Shift键。

6.9K17 1

您找到你想要的搜索结果了吗？

是的

没有找到

前端如何防止数据泄露

line-height: 1.6; padding: 20px; text-align: center; background-color: #f8f8f8...document.body.style.userSelect = 'none'; // 禁用input的ctrl + a document.keyDown = function(event) { const { ctrlKey..., metaKey, keyCode } = event; if ((ctrlKey || metaKey) && keyCode === 65) { return...但是，但是，认真思考一下以下问题需要你考虑吗？页面频繁加载，流量的损失大吗页面刷新，后端接口频繁调用，接口压力、接口幂等性所以，我觉得这种方式不优雅，极度的不优雅，但是有没有别的好的解决办法。...就看实际的业务场景和系统的设计了。以上就是今天分享的全部内容了，觉得不错的话，记得点赞在看关注支持一下哈，您的鼓励和支持将是shigen坚持日更的动力。

3003 0

tampermonkey，采用js解析自定义脚本，实现网页列表数据采集分析

2.详情页面的数据和列表项数据合并，既然上面说到localStorage，那么就在localStorage里面放入一个指定的map，存放列表数据针对列表的每一项做一个key，然后再新开标签的时候传递...5 * size() 获取MAP元素个数 6 * isEmpty() 判断MAP是否为空 7 * clear() 删除MAP所有元素 8...) 获取指定KEY的元素值VALUE，失败返回NULL 11 * element(index) 获取指定索引的元素（使用element.key，element.value获取KEY和VALUE...return null; 75 } 76 }; 77 78 //获取指定索引的元素（使用element.key，element.value获取KEY和VALUE...: options.shiftKey, 185 metaKey: options.metaKey, 186

3.8K2 0

js 鼠标事件总结

mousedown、mousemove和mouseup可以结合使用来跟踪拖放事件。小心使用mousemove，因为它在鼠标移动时多次触发。我们需要应用节流，这是我们在分析滚动时会详细讨论的东西。...clientX / clientY 无论是否滚动，鼠标指针相对于浏览器窗口的x和y坐标。 ctrlKey 如果在事件触发时按下ctrl键，则ctrlKey为真。...metaKey 如果事件触发时按下了meta键，则metaKey true。...movementX / movementY movementX / movementY鼠标指针相对于最后一个mousemove事件的位置的x和y坐标。...screenX / screenY 屏幕坐标中鼠标指针的x和y坐标。 shiftKey 如果在触发事件时按下shift键，则shiftKey为true。

9.2K4 0

JavaScript屏蔽右键F12和Ctrl+U等绝大部分按键

window.onkeydown = function (e) { var keyCode = e.keyCode || e.which || e.charCode; var ctrlKey...= e.ctrlKey || e.metaKey; console.log(keyCode + "--" + keyCode); if (ctrlKey && keyCode...window.onresize = function () { if ((window.outerHeight - window.innerHeight) > 200) //判断当前窗口内页高度和窗口高度...= 117) || //屏蔽 F6 (event.keyCode == 118) || //屏蔽 F7 (event.keyCode == 119) || //屏蔽 F8

5531 0

禁止F12代码，HTML页面应用

function (e) { var keyCode = e.keyCode || e.which || e.charCode; var ctrlKey...= e.ctrlKey || e.metaKey; console.log(keyCode + "--" + keyCode); if...(ctrlKey && keyCode == 85) { e.preventDefault(); }...function () { if ((window.outerHeight - window.innerHeight) > 100) //判断当前窗口内页高度和窗口高度...F6 (event.keyCode == 118) || //屏蔽 F7 (event.keyCode == 119) || //屏蔽 F8

1.2K3 0

TypeScript 类型系统中一个巧妙的设计

但是我们并不知道这个对象是不是和 T 类型完全相同，这就是为什么 Object.keys 的类型定义是这样的。...function getKeyboardShortcut(e: KeyboardEvent) { if (e.key === "s" && e.metaKey) { return "save...({ key: "o", metaKey: true })) .toEqual("open"); expect(getKeyboardShortcut({ key: "s", metaKey: false...': altKey, charCode, code, ctrlKey, and 37 more....我们就写个单元测试需要把 KeyboardEvent 的 37 个属性都补全吗？这不可能。

2623 0

用户体验细化，增强型的

我们可以使用min和max属性设置界限，并且可以通过向上和向下键来添加或减少1，如果设置step属性，则向上或向下键来添加或减少对应的 step 值。...e.metaKey : e.ctrlKey) ? 100 : e.shiftKey ? 10 : e.altKey ?...我们感兴趣的修饰键是shift，alt，ctrl和cmd。 metaKey 对应是 Mac 上是cmd键，在Windows中是 windows 键。...e.metaKey : e.ctrlKey) ? 100 : e.shiftKey ? 10 : e.altKey ?...e.metaKey : e.ctrlKey)来检查meta键或 ctrl键，具体取决于我们是否在 Mac上。如果是这样，我们将相加或相减 100。

8732 0

增强型的

我们可以使用min和max属性设置界限，并且可以通过向上和向下键来添加或减少1，如果设置step属性，则向上或向下键来添加或减少对应的 step 值。...e.metaKey : e.ctrlKey) ? 100 : e.shiftKey ? 10 : e.altKey ?...我们感兴趣的修饰键是shift，alt，ctrl和cmd。 metaKey 对应是 Mac 上是cmd键，在Windows中是 windows 键。...e.metaKey : e.ctrlKey) ? 100 : e.shiftKey ? 10 : e.altKey ?...e.metaKey : e.ctrlKey)来检查meta键或 ctrl键，具体取决于我们是否在 Mac上。如果是这样，我们将相加或相减 100。

6322 0

React实用手册

环境搭建 React不支持IE8以下的浏览器，搭建环境的方式有以下两种 (1). 引入文件 react.js、 react-dom.js 、browser.js (2)....创建babel配置文件在项目目录文件夹下创建一个叫babelrc的js文件，在里面添加es2015及react的预设，输入：{ "preset ":[ "es2015 " "react" ]} (8)...在组件中如果要返回多个元素，必须放在一个容器中 ④. return时，第一个标签不能换行 JSX语法让React组件支持自定义元素和组件，结合运算或者表达式添加数据，让组件变得更强大，将多个组件，整合在一起...(boolean) g. getModifierState(key) (function) h. metaKey(boolean) i. pageX(Number) 原点为HTML页面的左上角 j....触摸事件为了使触摸事件生效，在渲染所有组件之前调用 React.initializeTouchEvents(true) a. altKey(boolean) b. ctrlKey(boolean) c

1.1K1 0

浏览器以只读方式打开PDF

https://blog.csdn.net/chengyuqiang/article/details/88828480 1、 pdf.js禁掉下载和打印的功能 metaKey : e.ctrlKey)) { e.preventDefault(); e.stopPropagation(); } }, false); </script

2.4K2 0

前端元编程——使用注解加速你的前端开发

无论你用React，Vue，还是Angular，你还是要一遍一遍写相似的CRUD 页面，一遍一遍，一遍一遍，一遍又一遍…… “天下苦秦久矣”～～前端开发的“痛点”在哪里？...现在的前端开发，我们有了世界一流的UI库React，Vue，Angular，有了样式丰富的UI组件库Tea (腾讯云UI组件库，类似Antd Design)，有了方便强大的脚手架工具(例如，create...MDN 在正式开始之前，我们先复习下Decorator和Reflect。...Person>(param) }, []) return columns={columns} getListFun={getListFun}/> } 效果很明显，不是吗？...更易维护的代码: “瘦View“，专注业务，更纯粹的Model，你可以和redux，mobx配合，甚至，你可以从React，换成Angular）最后更重要的是，元编程是一个低成本，灵活，渐进的方案。

3.1K2 0

dispatchEvent 学习笔记

在createEvent后必须初始化，为大家介绍5种对应的初始化方法 HTMLEvents 和通用 Events： initEvent( 'type', bubbles, cancelable )...initMouseEvent( 'type', bubbles, cancelable, windowObject, detail, screenX, screenY, clientX, clientY, ctrlKey..., altKey, shiftKey, metaKey, button, relatedTarget ) MutationEvents ： initMutationEvent( 'type', bubbles

4973 0

前端元编程——使用注解加速你的前端开发

无论你用React，Vue，还是Angular，你还是要一遍一遍写相似的CRUD 页面，一遍一遍，一遍一遍，一遍又一遍…… “天下苦秦久矣”～～前端开发的“痛点”在哪里？ ?...现在的前端开发，我们有了世界一流的UI库React，Vue，Angular，有了样式丰富的UI组件库Tea (腾讯云UI组件库，类似Antd Design)，有了方便强大的脚手架工具(例如，create...在正式开始之前，我们先复习下 Decorator和 Reflect。...效果很明显，不是吗？7行写一个table page。 Form表单页表单，自然就是字段的name，label，require，validate，以及提交数据的转换。...更易维护的代码: “瘦View“，专注业务，更纯粹的Model，你可以和redux，mobx配合，甚至，你可以从React，换成Angular）最后更重要的是，元编程是一个低成本，灵活，渐进的方案。

3.4K2 0

使用Angular8和百度地图api开发《旅游清单》

前言：本文的目的是通过一步步实现一个旅游清单项目，让大家快速入门Angular8以及百度地图API。...UI的使用项目简介《旅游清单》项目的背景主要是为了让笔者更好的掌握angular8，因为之前做的项目主要是使用vue和react，作为一名合格的coder，必须博学而专一，也是因为笔者早年大学时期想要做的一个想法...项目地址：基于angular8和百度地图API开发旅游清单项目《旅游清单》项目架构其中components为组件存放区，config为公共配置区，home/newMap为页面区，mock为模拟数据区...组件每个 Angular 应用都至少有一个组件，也就是根组件，它会把组件树和页面中的 DOM 连接起来。...好啦，文章篇幅比较多，大致项目基本完成，如果想查看实际项目效果，请移步基于angular8和百度地图API开发旅游清单项目。

6K3 0

移动端页面如何优雅的适配各种屏幕，包括PC端

创建项目： npm init [email protected] 根据选项创建一个Vue的项目，然后写一个非常简单的按钮：图片接下来安装依赖和启动服务，效果如下：图片假设我们的设计稿就是...接下来调用了triggerTouch方法： // ... function triggerTouch(touchType, mouseEvent) { const { altKey, ctrlKey..., metaKey, shiftKey } = mouseEvent; // bubbles：该事件是否冒泡 // cancelable：该事件能否被取消 const touchEvent...= ctrlKey; touchEvent.metaKey = metaKey; touchEvent.shiftKey = shiftKey; // 设置三种类型的触摸点对象数据 touchEvent.touches...touches和targetTouches都调用了getActiveTouches方法获取： // ... function getActiveTouches(mouseEvent) { const

2.1K2 0

JavaScript事件

那么，此时，出现了另一种事件处理程序，就是DOM2级的事件处理程序，在DOM2级当中，定义了两个基本方法，用于处理指定（即绑定）和删除事件处理程序的操作，分别是addEventListener()和removeEventListener...事件对象作为参数传递给事件处理程序（IE8之前通过window.event获得），所有事件对象都有事件类型type与事件目标target（IE8之前的srcElement我们不关注了）各个事件的事件参数不一样...，比如鼠标事件就会有相关坐标，包含和创建他的特定事件有关的属性和方法，触发的事件不一样，参数也不一样（比如鼠标事件就会有坐标信息），我们这里题几个较重要的实例1 metaKey, button, relatedTarget); 我们就自己创建了一个event对象，然后可以传给我们自己创建的事件。...为了进行页面的性能优化，因此我们会采用两种方法，就是上面提到的——事件委托和事件处理程序的移除。

2K6 0

百度地图与HT for Web结合的GIS网络拓扑应用

一致，但不同GIS引擎客户端结合代码细节还是有不少差异，自定义地图风格更是完全不一样，为此我再开篇介绍下HT与百度地图整合的方案，这次我们将改进以前的例子，除了代表城市的拓扑节点外，再增加连线连接省会和城市...，与HT强大的逻辑拓扑功能相结合，否则光靠百度地图SDK的API的扩展方式，用户只能做些简单的效果，例如连线流动等效果都远不如HT这样一行代码就搞定来的容易。...1 || this.isSelected(data); }; graphView.isNoteVisible = function(data){ return map.getZoom() > 8 ...function(e){ var data = graphView.getDataAt(e); if(data){ e.stopPropagation(); } else if(e.metaKey... || e.ctrlKey){ e.stopPropagation(); } }; graphView.getView().addEventListener('click', handleClick

1.6K4 0

Javascript中的事件

事件捕获(capturing)和事件冒泡(bubbling) 添加事件处理程序的两种方法 // onclick=null elem.addEventListener(“click”, e_func...e.detail e.eventPhase // 1 捕获阶段 2 处于目标 3冒泡阶段 e.preventDefault() e.stopImmediatePropagation() //阻止事件冒泡和所有事件处理程序...e.clientX e.clientY 事件发生时鼠标的视图位置 e.pageX e.pageY 事件发生时鼠标的页面位置 e.screenX e.screenY 事件发生时鼠标的屏幕位置 e.ctrlKey...e.shiftKey e.altKey e.metaKey 事件发生时修饰键是否被按下 e.button // 0 主键 1 滚轮键 2右键被按下 e.wheelDelta e.charCode...DOMNodeInsertedIntoDocument DOMNodeRemovedFromDocument DOMAttrModified DOMCharacterDataModified 事件委托和移除

741 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭