如何在单击内部按钮时不丢失Div焦点
在单击内部按钮时不丢失Div焦点，可以通过以下几种方法实现：
- 使用JavaScript事件处理程序：在按钮的点击事件处理程序中，使用
event.preventDefault()方法来阻止按钮的默认行为，这样就不会导致Div失去焦点。例如：
<div id="myDiv" tabindex="0">
<!-- Div内容 -->
<button onclick="handleButtonClick(event)">按钮</button>
</div>
<script>
function handleButtonClick(event) {
event.preventDefault();
// 处理按钮点击事件
}
</script>- 使用CSS属性
pointer-events: none：将按钮的CSS属性设置为pointer-events: none，这样按钮将不会响应鼠标事件，从而不会导致Div失去焦点。例如：
<style>
#myButton {
pointer-events: none;
}
</style>
<div id="myDiv" tabindex="0">
<!-- Div内容 -->
<button id="myButton">按钮</button>
</div>- 使用
button元素的disabled属性：将按钮的disabled属性设置为true，这样按钮将变为禁用状态，不会响应点击事件，从而不会导致Div失去焦点。例如：
<div id="myDiv" tabindex="0">
<!-- Div内容 -->
<button id="myButton" disabled>按钮</button>
</div>以上是几种常见的方法，可以根据具体情况选择适合的方式来实现在单击内部按钮时不丢失Div焦点。
相关·内容
2回答
我尝试在用户单击输入字段时禁用表单提交按钮
javascript、html、jquery
<html>
<form class="form-disable">
<br>
<input type="text" id="message2">
<br>
<button id="myButton" type="submit" onclick="text()"disabled>Generate Text</butto
浏览 15提问于2021-04-30得票数 0
回答已采纳
5回答
使用jQuery使禁用按钮显示为禁用状态的最简单方法
javascript、jquery、button
当我使用.prop(' disabled '，true)禁用一个按钮时，它可以工作，但该按钮看起来并不是禁用的。我记得以前当我使用.attr(' disabled '，'disabled')禁用按钮时，它们会变得更加明显地被禁用，也就是说，文本会变灰，或者其他什么东西，这样用户就不会尝试点击了。现在，我认为按钮边框会褪色一点，但文本不会。
恢复旧有行为的最简单方法是什么？我很懒，不想写一行代码来禁用按钮，也不想写另一行代码让它看起来被禁用-如果可能的话，我想在一个命令中获得这两种效果。我应该使用按钮以外的其他元素吗？一种不同的禁用方法？
我在这里
浏览 5提问于2014-03-26得票数 10
5回答
使用函数在jQuery中获取元素的id
jquery
我有一个简单的代码，在div容器中有两个按钮。我想用函数得到按钮的id。
Problem：有人能解释一下为什么点击Button1不能提醒myButton1吗？我怎样才能解决这个问题？
码
<html>
<body>
<style type="text/CSS">
#mydiv{
border: 1px dashed blue;
width: 100px;
height: 100px;
}
</style>
浏览 5提问于2014-09-11得票数 1
回答已采纳
1回答
按钮必须出现在输入焦点上，但当单击窗体的另一个按钮时，它将消失。
javascript、html、button、input、addeventlistener
当输入有焦点时，我的按钮出现问题。当用户与搜索栏交互时，“取消”按钮必须是可见的。我已经完成了addEventListener在输入点击/焦点上的工作。但有一个问题，当我点击“清除”按钮，我的“取消”按钮消失在手机上，导致输入失去焦点。有什么方法可以触发按钮出现在另一个适合我的目标的事件上吗？或者有一种方法可以在按下“清除”按钮的同时将注意力集中在输入上。谢谢!
我试过：
按下事件，addEventListenerAll上所有元素的发件人，改变点击焦点和其他..
我的html
<form class="search__form">
<button class=
浏览 3提问于2022-08-01得票数 0
回答已采纳
3回答
当单击其中的元素时，DIV失去焦点
javascript、jquery
为什么当我点击DIV中的元素时，DIV就失去了焦点？我有一个JS，当它失去焦点时，它会隐藏DIV。但是，当单击DIV中的元素时，不应该发生这种情况。这需要用.on来完成，因为有一些ajax加载正在进行。
$(document).on('focusout', '#geomodal', function(e) {
console.log('.focusout');
});
<div id="geomodal" tabindex="-1">
<input value="109&#
浏览 5提问于2015-01-29得票数 4
回答已采纳
2回答
当jquery ()用于设置内部.html时，表单按钮上的.click()事件不再工作
javascript、html、jquery、button、onclick
我有一个html表单，其中包含一个按钮。该按钮在js文件中附加了一个.click()事件。这很好，直到我使用jquery .html()将我的主页内容替换为表单内容。窗体显示在页面上，但单击按钮将不再触发事件。我想知道这是为什么？下面的代码..。
html：
<body>
<div id="mainContent">
<!-- Visible page content will show here -->
</div>
<div id="otherScreens"&g
浏览 12提问于2022-11-14得票数 0
回答已采纳
1回答
将另一个输入保留为jquery时，移动到特定的制表符索引
javascript、jquery、outsystems
我有一个动态生成的页面，所有的tabindex都是预设的。我尝试做的是，当另一个输入失去焦点时，将焦点设置到特定的tabindex。例如，如果我有<input tabindex=119>，另一个有<input tabindex=16>，当119失去焦点时，我如何才能到达tabindex=16？我试过了 $(zip).keydown(function(event) {
if (event.which == 9) {
event.preventDefault();
//$('#
浏览 21提问于2020-01-13得票数 0
回答已采纳
1回答
焦点并单击Javascript中的事件执行顺序
javascript、dom-events
我在文本框上定义了一个focusout事件处理程序，在一个按钮上定义了一个click处理程序。如果我将焦点放在文本输入中，然后直接单击按钮，那么这两个事件都会像预期的那样被触发。focusout事件首先被触发，如果打开developer工具栏，则会触发click，否则它会以反之亦然的方式触发。
这背后的真正原因是什么？
下面是提问的片段，但我相信问题本身已经足够清楚了：
document.getElementById('myInput').addEventListener('blur', function(){ alert("Input Focuse
浏览 3提问于2017-03-02得票数 3
1回答
JQuery -在Firefox和IE中通过Tab导航时焦点不工作
javascript、jquery、html、internet-explorer、accessibility
我有一个简单的导航栏，我打算首先使用键盘可访问的导航。导航栏的工作方式如下：
使用Tab键，您应该能够浏览每个导航类别及其元素。
使用右*和**左键，您只能导航导航类别。
使用Down键还可以打开导航类别。
使用ESC键关闭(隐藏)当前可见的导航类别。
这是我开发的。
为了保持简单，请将注意力集中在JavaScript代码上，因为由于我无法控制的需求原因，HTML无法更改。我认为问题在于Firefox/IE如何处理与Chrome不同的focus事件。
$(document).ready(function(){
var utilitymenu = new menu
浏览 1提问于2015-11-05得票数 2
回答已采纳
3回答
这里是我的完整html文档，下面是简短的版本：
$(document).ready(function () {
$("#myDiv").append($("<input />", {
type : "button",
id : "myButton1",
value : "Click me first!"
浏览 3提问于2012-01-19得票数 2
回答已采纳
3回答
如何使div及其所有后代不可聚焦
javascript、html、reactjs、focus、accessibility
我试着做一个div和它所有的后代都无法聚焦。我在根div上使用了tabIndex -1。但这使得焦点转移到了第一个可聚焦的孩子身上。(默认行为)有解决此问题的方法吗？
示例代码
const SomeFunctionComponent = () => {
// ... some logic ...
const someTrustedHtml = `<p>Hello <a href="stackoverflow.com">World!</a></p>`;
const content = React.createEl
浏览 2提问于2021-12-21得票数 1
回答已采纳
3回答
使用fadeIn滚动div
javascript、html
我有下面的代码，我试图做的是当我点击按钮时，div的内容应该从div的首字母开始显示。我不擅长js.For现在当我点击按钮时div内容直到我滚动页面才会显示。那么，当我单击按钮时，如何让它自动滚动到div内容的顶部呢？
//HTML
<button type="button" class="btn btn-info btn-block" id="show"></button>
<div class="container-fluid" id="detail" style="di
浏览 23提问于2017-12-22得票数 1
2回答
Foundation6显示弹出表单字段不需要的焦点丢失(在jQuery事件中？)
jquery、forms、zurb-foundation-6、lostfocus、zurb-reveal
我正在使用Foundation6 reveal编写弹出式表单。我面临的JavaScript问题可能与jQuery.js / Foundation.js事件绑定或处理有关。
当我单击“显示”窗口中的文本字段(或任何其他字段)时，该字段将获得焦点，然后“显示”窗口将迅速隐藏并再次显示，该字段已失去焦点。显示窗口也改变了它在屏幕上的位置。访问文本字段的唯一方法是使用选项卡键。
index.html：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" hr
浏览 6提问于2016-11-28得票数 4
回答已采纳
2回答
TinyMCE自定义主题-项目列表编号列表链接取消链接不起作用
javascript、jquery、tinymce
因此，我在他们的网站上使用按钮方法为TinyMCE创建了一个自定义主题。大多数按钮似乎都在工作，但项目列表、数字列表、链接和取消链接按钮什么也不做。即使切换到HTML视图，html也不会被添加(即，<ul><li></li></ul>)。我已经尝试添加插件的advlist，advlink等，但没有改变。似乎在网上找不到这个问题的答案。
下面是我的tinymce代码：
$('textarea.htmlify').tinymce({
mode: 'textareas',
script_url : hos
浏览 2提问于2013-01-22得票数 10
回答已采纳
3回答
html验证(使用jquery.validate.js)在某些情况下不起作用
javascript、jquery、ajax、forms、validation
我想创建一个html表单，必须填写电子邮件地址，一些文字和协议的条款和条件。当所有3个字段都有效时，应启用submit按钮。到目前为止，我创建了脚本，几乎所有工作都很好。html代码很简单：
<form id="myform">
<input id="email" name="email" class="textox" placeholder="your@email.com" />
<br/>
<textarea maxlength="140
浏览 5提问于2015-06-21得票数 2
回答已采纳
2回答
无法获得按钮组件值onClick
reactjs
我确信这是微不足道的事情，但当用户单击按钮时，我似乎不知道如何访问按钮的值。当页面加载时，我的按钮列表将使用唯一值正确呈现。但是，当我单击其中一个按钮时，函数会触发该值返回未定义的值。有人能告诉我我做错了什么吗？
路径：TestPage.jsx
import MyList from '../../components/MyList';
export default class TestPage extends React.Component {
constructor(props) {
super(props);
this.state = {};
浏览 2提问于2017-10-26得票数 0
回答已采纳
1回答
如何使按钮在角度上没有聚焦效果而失效？
javascript、html、angular、typescript
我有两个输入字段和保存按钮的更新操作。如果没有更改，我需要禁用保存按钮。下面的代码运行良好，但唯一的问题是，如果我单击屏幕上的其他地方(当输入字段失去焦点时，则保存按钮将变为活动按钮)，则保存按钮将变为活动按钮。
模板代码是：
<mat-card-content>
<h1 class="new-header">Enter New Values</h1>
<div fxLayout="row">
<mat-form-field fxFlex="20&#
浏览 1提问于2019-02-27得票数 0
回答已采纳
1回答
React.Js输入字段放松对每次击键的关注
reactjs
当我按下输入值的键时，文本字段失去焦点，再次需要单击输入字段。
import React, { useState } from "react";
import styled from "styled-components";
import Button from "../../UI/Button/Button";
import "./CourseInput.css";
const CourseInput = (props) => {
const [enteredValue, setEnteredVa
浏览 1提问于2022-01-06得票数 0
回答已采纳
2回答
jquery dblclick事件无法停止事件传播
javascript、jquery
我在div上有双击事件处理程序，在按钮上有单击事件处理程序，这是div的子级。但是当我点击按钮2次时，div的dblclick事件就会发生(参见 )。
<!DOCTYPE html>
<html>
<head>
<script src="/bs21/js/jquery-1.10.1.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8&#
浏览 3提问于2013-07-16得票数 0
回答已采纳
4回答
Jquery:新增提交按钮时，不能重复选择
jquery、html、replace、click
我想使用html()-function向当前页面添加一个按钮。
此按钮需要是可选择的，并在单击时发出警报(‘click’)。这似乎是不可能的。
看看这段代码
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(event){
$('div').html('<form method="post" action=""><input type=&
浏览 1提问于2010-06-30得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
