event-handling 相关问题

鼠标悬停事件未按预期传播（添加按钮效果）

我想在鼠标悬停在按钮上的位置上跟随光标做一个简单的突出显示。 如果有人知道一种无需 js 即可完成此操作的方法，那就更好了（发现了一篇疯狂的帖子......

将 Blazor 组件集成到 Razor 页面 (*.cshtml) - 事件

我想在 razor 页面 (*.cshtml) 的 EventCallBack 中实现 Blator 组件。目前该组件已显示，我可以单击组件内的按钮并做出正确的反应...

在 Astro 页面中附加点击事件处理程序

在 Astro 页面的组件模板部分，我添加以下脚本： // src/pages/foo.astro document.addEventListener('DOMContentLoaded', function() { 常量 myEl...</desc> <question vote="0"> <p>在 Astro 页面的组件模板部分，我添加以下脚本：</p> <pre><code>// src/pages/foo.astro &lt;script&gt; document.addEventListener(&#39;DOMContentLoaded&#39;, function() { const myElement = document.getElementById(&#39;myId&#39;); if (myElement) { myElement.addEventListener(&#39;click&#39;, function() { console.log(&#39;Clicked on element with ID &#34;myId&#34;&#39;); // Add your desired functionality here }); } else { console.warn(&#39;Element with ID &#34;myId&#34; not found&#39;); } }); &lt;/script&gt; </code></pre> <p>这是一个通用脚本，将单击事件处理程序附加到 <pre><code>myId</code></pre> 元素（如果找到）。 请注意，在加载 DOM 内容时，通过 <pre><code>DOMContentLoaded</code></pre> 侦听器附加该事件，以确保在到期时创建 <pre><code>myId</code></pre>。</p> <p>如果我直接导航到该页面，我可以阅读 <pre><code>console.log()</code></pre> 发送的消息，具体取决于 <pre><code>myId</code></pre> 的存在。 但是，从另一个页面链接到 <pre><code>foo.astro</code></pre>：</p> <pre><code>// src/pages/bar.astro ... &lt;a href=&#34;/foo.astro&#34;&gt;Go to foo&lt;/a&gt; </code></pre> <p>然后，当我单击指向 <pre><code>foo</code></pre> 的链接时，<pre><code>DOMContentLoaded</code></pre> 事件不会被触发，并且我看不到任何控制台消息。</p> <p>当我寻找具有不同功能的元素时也会发生这种情况，例如<pre><code>document.querySelectorAll()</code></pre>。</p> <p>那么，在 Astro 中添加事件处理程序的正确方法是什么？<br/> 我是否应该<em>避免等待 DOM 加载</em>并期望 Astro 在正确的时间注入我的页面脚本？ Astro 是如何决定的？</p> </question> <answer tick="false" vote="0"> <p>您使用 Astro <pre><code>ViewTransition</code></pre> 吗？如果是这样，那就可以解释行为上的差异。并且您应该收听 <a href="https://docs.astro.build/en/guides/view-transitions/#astropage-load" rel="nofollow noreferrer"><pre><code>astro:page-load</code></pre> 事件</a>。</p> <p>顺便说一句。 Astro 中没有任何属性的 <pre><code>&lt;script&gt;</code></pre> 标签将转换为 <pre><code>&lt;script type=&#34;module&#34;&gt;</code></pre>，因此您不需要任何 <pre><code>DOMContentLoaded</code></pre> 侦听器（请参阅 <a href="https://docs.astro.build/en/guides/client-side-scripts/" rel="nofollow noreferrer">Astro 文档</a>）。 JS 模块仅在 DOM 加载后执行。</p> </answer> </body></html>

在主线程上处理事件的正确方法

通常，当我想在后台线程中调用的主线程上处理事件时，我会编写以下内容： _backgroundWork.BackgroundEvent += (sender, args) => DoSomethingFor...

如何在WPF单元测试中模拟按键组合？

我正在尝试为 WPF 组件编写单元测试。如何模拟组合键（不仅仅是 1 个键）？ 模拟按下 1 个键很简单： var 窗口 = 新窗口(); ...

有没有办法用Javascript找到元素的事件处理程序？

假设你有这个div： 酒吧 你这样做： $("#foo").click(someFunction); Javascript 代码中的某处。 页面加载后...

如何更改点击事件的按钮颜色？

在ms-window应用程序上，我希望更新按钮样式“on-click”事件，并将其恢复为原始样式“on-release”。我至少测试了这两种方式，都开不到...

更好地处理Promise.race

尝试为绘图工具编写流程逻辑，用户可以在其中输入键盘输入以在卡瓦斯上绘图，比方说，为了实现此目的，我尝试以删除事件侦听器的方式链接事件侦听器

通过下拉选择应用奖励，当选择不同的选项时奖励消失

我正在尝试构建一个导出 DnD 5e 字符表的 React 应用程序。根据您选择的种族/物种，有不同的奖励。我有一个下拉菜单可以选择您的比赛，我想申请...

在React js中的TextField中放置长度约束

我正在接受卡号用户的输入，并希望用户输入的长度不得小于和大于12。这是我的文本字段的声明。 我正在接受卡号用户的输入，并希望用户输入的长度不得小于和大于12。这是我的文本字段的声明。 <TextField id="SigninTextfield" label="Aadhaar number" id="Aadhar" lineDirection="center" required={true} type="number" maxLength={12} style={styles.rootstyle} erorText="Please enter only 12 digits number" /> 现在我不明白是否使用javascript或任何事件处理程序来限制长度。 您可以设置 maxLength 属性来限制文本框中的文本。 您可以将 onChange 传递给 maxLength inputProps 的 material-ui（小写 i，而不是 InputProps）属性，而不是 TextField 方法。 <TextField required id="required" label="Required" defaultValue="Hello World" inputProps={{ maxLength: 12 }} /> 基本上我们可以通过 inputProps 对象编辑所有输入元素的本机属性。 链接到TextField Api 我找到了另一个解决方案这里。 <TextField required id="required" label="Required" defaultValue="Hello World" onInput = {(e) =>{ e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12) }}/> <TextField autoFocus={true} name="name" onChange={handleChange} placeholder="placeholder" id="filled-basic" variant="filled" size="small" fullWidth inputProps={{ maxLength: 25, }} InputProps={{ startAdornment: ( <InputAdornment position="start"> <SearchIcon /> </InputAdornment> ), }} /> <TextField id="username" name="username" label={translate('username')} onChange={handleChange} onBlur={handleBlur} value={values.username} error={Boolean(errors.username) && touched.username} helperText={(errors.username && touched.username && translate(errors.username))} required inputProps={{maxLength :20}} /> 值得注意的是，Material-ui <TextField /> 组件没有 maxlength 属性。然而，原始的 html <input> 确实如此。因此，您实际上不需要创建任何额外的函数来使其正常工作。只需使用基本 <input> 属性即可使用 inputProps。 实际答案是这样的： inputProps={ {maxLength: 22} } // Result => <input maxlength="yourvalue" /> 它的作用是设置底层 maxlength 的 <input> 属性，结果是：<input maxlength="yourvalue" />。这里要注意的另一个重要事项是您使用 inputProps 而不是 InputProps。您的目标是小写字母 inputProps。 如果您使用的是 MUI 5 版本 5.0.6，由于对旧版本的支持，您将必须执行以下操作， <TextField id="standard-textarea" label="A label" placeholder="Some text here" multiline variant="standard" defaultValue={"Hello"} inputProps={{ maxLength: 255, }} InputProps={{ disableUnderline: true, }} /> TextField同时支持inputProps和InputProps，但有些属性反之则不起作用。 maxLength 在 InputProps 中无法按预期工作，并且 MUI 5 的 disableUnderline 等属性在 inputProps 中无法按预期工作。 小心可能的 typo 与 i。 请参阅 API 了解更多信息，https://mui.com/api/text-field/。 我发现 Material UI 中 TextField 和 Input 之间的行为有些奇怪 它们彼此非常相似，我看到的问题如下： 在 TextField 组件上，如果您使用大写 "I" 的 InputProps，则会显示装饰，但另一方面，如果您将其用作小写“inputProps”，则 maxLength Html 属性将被视为 valid ，但不是 adorments 我最终使用 INPUT 而不是 TextField，所以你可以在 中使用 adorments <TextField variant="outlined" required fullWidth error={errors.email} id="email" label={t("signup-page.label-email")} name="email" onChange={handleChange} inputProps={{ endAdornment: ( <InputAdornment position="end"> <IconButton aria-label="toggle password visibility"> <EmailIcon /> </IconButton> </InputAdornment> ), maxLength: 120, }} /> 在上面的代码中，adorment被忽略，但是maxLength被用作“inputProps”驼峰式大小写 下面的代码是一个工作示例，正如您所看到的，我将其视为旧样式中的 Form Control、输入标签和输入“outlinedInput” <FormControl variant="outlined" fullWidth> <InputLabel htmlFor="firstName">Password</InputLabel> <OutlinedInput value={values.firstName} autoComplete="outlined" name="firstName" variant="outlined" required fullWidth error={errors.firstName} id="firstName" label={t("signup-page.label-firstname")} onChange={handleChange} autoFocus inputProps={{ maxLength: 32 }} /> </FormControl> 解决方案。我的最后建议，使用 OutlinedInput 而不是 TextField，这样你就可以分开放置 Adorments 和 maxLength 下面是一个带有 FormControl OutlinedInput、inputProps - maxLength 和结束 Adorment 图标 的工作示例 <FormControl variant="outlined" fullWidth> <InputLabel htmlFor="password">Password</InputLabel> <OutlinedInput value={values.passwordConfirm} variant="outlined" required fullWidth error={errors.passwordConfirm} name="passwordConfirm" label={t("signup-page.label-password-confirm")} type={values.showPasswordConfirm ? "text" : "password"} id="password-confirm" onChange={handleChange} inputProps= {{maxLength:32}} endAdornment= { <InputAdornment position="end"> <IconButton aria-label="toggle password visibility" onClick={handleClickShowPassword("passwordConfirm")} onMouseDown={handleMouseDownPassword} > {values.showPasswordConfirm ? ( <Visibility /> ) : ( <VisibilityOff /> )} </IconButton> </InputAdornment> } /> {errors.passwordConfirm && ( <p className="error"> {errors.passwordConfirm} </p> )} </FormControl> 接受的答案在 Firefox 中不适用于大数字（大于 16 位数字）。数字的行为方式很奇怪。 对于 22 长度的字段，我们最终使用了这个： <TextField required validateOnBlur field="cbu" label="22 dígitos del CBU" validate={validate.required} type="text" inputProps={ {maxLength: 22} } onInput={(e) => { e.target.value = e.target.value.replace(/[^0-9]/g, '') }} /> 基本上，文本字段的原生 maxLength 约束，加上“即时”从字符串到数字的转换。 改进 此外，您可能更喜欢使其可重用且更具语义。 # constraints.js const onlyNumbers = (e) => { e.target.value = e.target.value.replace(/[^0-9]/g, '') }; # form.js <TextField field="cbu" label="22 dígitos del CBU" inputProps={ {maxLength: 22} } onInput={(e) => onlyNumbers(e) } 材料设计 <TextField /> 组件没有任何 length 属性。 您可以使用 onChange() 方法创建您的。 updateTextField(event,value){ if(value.length <= 12){ //Update your state } else{ //Value length is biggest than 12 } } <TextField id="SigninTextfield" label="Aadhaar number" id="Aadhar" lineDirection="center" required={true} type="number" onChange={(e,v) => this.updateTextField(e,v)} style={styles.rootstyle} erorText="Please enter only 12 digits number" /> 在您的更改处理程序中，只需编写即可。 if (event.target.value.length !== maxLength ) return false; 我也遇到了类似的问题，但使用的是 TextareaAutosize。不幸的是， inputProps={{ maxLength: 12 }} 不适用于 TextareaAutosize。 以下解决方法适用于 TextareaAutosize 以及文本和数字。 受到此问题已接受答案的启发 - https://stackoverflow.com/a/49130234/5236534 onInput = {(e) =>{ e.target.value = (e.target.value).toString().slice(0,10) import * as React from 'react'; import TextareaAutosize from '@mui/material/TextareaAutosize'; export default function MinHeightTextarea() { return ( <TextareaAutosize aria-label="minimum height" minRows={3} placeholder="Minimum 3 rows" style={{ width: 200 }} onInput = {(e) =>{ e.target.value = (e.target.value).toString().slice(0,10) }} /> ); } 演示链接：限制 MUI TextareaAutosize 中的字符长度 <TextField id="SigninTextfield" label="Aadhaar number" id="Aadhar" lineDirection="center" required={true} type="number" inputProps={{ maxLength: 20, }} style={styles.rootstyle} erorText="Please enter only 12 digits number" /> 我们可以通过以下方式使用 inputProps 属性进行设置 import React from 'react' import { Autocomplete, TextField } from '@mui/material' export default function Select({ onChangeInput, label, name, value, options, placeholder, disabled, error, helpertext, required, shrink, maxLength }) { const _onChange = (e, v) => { onChangeInput(v) } return ( <Autocomplete freeSolo fullWidth={true} multiple={false} margin={'noraml'} readOnly={disabled} name={name} isOptionEqualToValue={(option, value) => option.label === value.label} value={value} options={options} placeholder={placeholder} renderInput={params => ( <TextField {...params} label={label} error={error} required={required} helperText={helpertext} variant={'standard'} inputProps={{ ...params.inputProps, maxLength: (maxLength && parseInt(maxLength)) || 99}} InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }} /> )} onInputChange={_onChange} /> ) } 对于仍在寻找数字字段解决方案的人来说，这个解决方案对我来说效果很好。 onInput={(e: any) => { e.target.value = Math.max(0, parseInt(e.target.value)) .toString() .slice(0, 2); }} 确保使用任意一个。 import * as React from "react"; import Box from "@mui/material/Box"; import TextField from "@mui/material/TextField"; export default function BasicTextFields() { const [num, setNum] = React.useState(); const limitChar = 12; const handleChange = (e) => { if (e.target.value.toString().length <= limitChar) { setNum(e.target.value); } }; return ( <Box component="form"> <TextField type="number" id="outlined-basic" label="Outlined" variant="outlined" onChange={(e) => handleChange(e)} defaultValue={num} value={num} /> </Box> ); } 其中很多答案现在已被弃用。推进 MUI 的新方法是使用 slotProps： return ( <TextField id={id} name={id} label={label} value={value} onChange={onChange} onBlur={onBlur} size={size} error={!!error} slotProps={{ htmlInput: { maxLength: 50 } }} {...props} /> );

React.js 服务器端渲染和事件处理程序

我正在学习使用react.js，但在使用事件处理程序时遇到一些问题。最后一个问题是：是否可以使用服务器端渲染并将事件处理程序发送到客户端自动...

将带有事件的函数从子组件传递到父组件

我有一个带有输入的子组件，我想使用道具在事件中传递信息。将数据发送到父组件的最佳方式是什么？ 在父组件中，我有函数和

skia中如何处理事件？

我打算使用skia作为应用程序。如何在 Skia 中处理 Web 输入框单击、滚轮事件等事件？滑雪场可能发生哪些事件？ 怎样处理skia中的事件？

在C++中，使用gtkmm-3.0，如何将XML文件中创建的小部件连接到函数

我正在学习C++，以及如何使用gtkmm（我正在使用gtkmm版本3.24）。我创建了一个简单的窗口，其中有几个小部件，但我无法将简单的事件与简单的函数连接起来。 米...

使用本机 Javascript 实现 jQuery 的“实时”活页夹

我试图弄清楚如何将事件绑定到动态创建的元素。即使元素被销毁并重新生成，我也需要事件持续存在于元素上。 显然是 jQuery 的 live

如何使用另一个自定义控件在自定义控件中初始化事件

大家好 我正在尝试创建一个自定义组合框。我创建了一个自定义下拉按钮并使用 is 作为下拉按钮。用户按下此按钮后，将打开一个面板，其中包含...

DevExpress 组件后代中未触发 OnKeyPress

下面的代码定义了一个 TcxDBBlobEdit 后代及其自己的 OnKeyPress。 我的问题是这个 OnKeyPress （“此处断点”）永远不会被触发。 我在忽略什么？ 类型 TPasswordTcxDBBlob...

更新动态更改以获取数据

我现在陷入困境。我创建了一个函数来控制使用毫秒到秒、分钟和小时的计算来获取数据的频率，这似乎工作正常。 这是...

监听子组件中的焦点事件 - 处理程序不捕获焦点事件

我正在使用 Angular 16 - 父组件消耗子组件 - 父组件如下 父组件.html 我正在使用 Angular 16 - 父组件消耗子组件 - 父组件如下 parent.component.html <app-gotoitem #initialFocusComponent (initialFocusNativeElementFocus)="focusHandler($event)"></app-gotostudent> parent.component.ts @ViewChildren('initialFocusComponent') initialFocusComponents: QueryList<any>; ... focusHandler(e) { console.log("do something"); } ... this.initialFocusComponents.first.setFocus(); 在我的子组件（gotoitem）中 child.component.ts @Output() initialFocusNativeElementFocus = new EventEmitter(); @ViewChild('initialFocus') initialFocus: ElementRef; ... fromEvent(this.initialFocus.nativeElement, 'focus') //(B) .pipe(take(1)) .subscribe(elem => { this.initialFocusNativeElementFocus.emit(); //(C) <--this doesn't get executed }); ... public setFocus(): void { this.initialFocus.nativeElement.focus(); //(A) } 但是，在子进程执行“.focus()”语句（A）之后，“focus”事件监听器（B）不会捕获“focus”事件 - 因此会出现“emit()”（ C) 永远不会被执行。 我可以看到焦点事件处理程序附加到所需的 HTML 元素（this.initialFocus.nativeElement 指向，这是一个 kendo-dropdownlist） - 但是焦点事件侦听器附加了两个事件（第一个指的是“文档”）元素 [通过 zone.js 设置]，第二个指的是 this.initialFocus.nativeElement 指向的元素） - 见下文 如果我手动删除“文档”事件处理程序并将焦点放在有问题的元素上，“焦点”处理程序将捕获该事件并执行“emit()” 通常如何处理这种情况 - 无论“文档”事件处理程序是否存在，我都需要定义的焦点事件也运行 - 或者我是否需要删除“文档”事件处理程序 - 如果是这样怎么办？ 非常感谢 据我所知，kendo-dropdownlist无法接收焦点（并且不应该按照其设计）。在开发工具控制台中输入： setInterval(() => console.log(document.activeElement), 1000); 然后聚焦所需的元素，您将看到span元素已聚焦。

如何将事件委托添加到单选按钮上的“更改”事件（而不是单击）？

我经常使用类似代码的父元素上的“click”事件轻松实现事件委托 HTML： 我经常使用类似代码的父元素上的“单击”事件轻松实现事件委托 HTML： <div> <span> <input type="radio" id="all0" name="difficulty-ask" class="difficultyaskclass" value="all" checked="checked" /> <label for="all0">All</label> <input type="radio" id="2easy1" name="difficulty-ask" class="difficultyaskclass" value="easy" /> <label for="2easy1">Easy</label> <input type="radio" id="2med2" name="difficulty-ask" class="difficultyaskclass" value="medium" /> <label for="2med2">Medium</label> <input type="radio" id="2hard3" name="difficulty-ask" class="difficultyaskclass" value="hard" /> <label for="2hard3">Hard</label> </span> </div> JS： parentelement.addEventlistener('click', (event) => { if(event.target.classList.contains('targetelement'){Code..}}; （父元素只是一个常规的div，其中放置了单选按钮） 如果单选按钮切换状态，它现在如何处理“更改”事件？ 我首先通过循环遍历所有这些，然后为每个添加一个事件监听器来使其工作。但这显然不是理想的解决方案，我肯定需要一些事件委托。 您可以使用 input 事件，该事件对任何表单元素也有效 演示： const myForm = document.forms['my-form']; myForm.addEventListener('submit', e => { e.preventDefault(); // disable submit - page reload const formValues = Object.fromEntries(new FormData(myForm).entries()); console.log( formValues ); setInterval(console.clear,8000); }) myForm.addEventListener('input', e => { if (!e.target.matches('input[type="radio"]')) return; console.log(myForm['difficulty-ask'].value); setInterval(console.clear,2000); });label { display:block; } fieldset { width: fit-content; }<form name="my-form"> <fieldset> <legend> difficulty </legend> <label> <input name="difficulty-ask" type="radio" value="all" checked > All </label> <label> <input name="difficulty-ask" type="radio" value="easy" > Easy </label> <label> <input name="difficulty-ask" type="radio" value="medium" > Medium </label> <label> <input name="difficulty-ask" type="radio" value="hard" > Hard </label> </fieldset> <button>submit</button> </form>