js click()模拟点击无效

eggsound 2019-09-17 02:55:59
重发一帖，原帖描述得不清楚。

做了个小的点击脚本，无奈发现遇到这个情况。

元素是在点击提交后动态生成的

生成的部分源码：

<div class="pui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<button type="button" class="pui-button ui-widget ui-state-default ui-corner-all pui-button-text-icon-left" role="button" aria-disabled="false">
<span class="pui-button-icon-left ui-icon ui-icon-check"></span>
<span class="pui-button-text">确定</span>
</button>
<button type="button" class="pui-button ui-widget ui-state-default ui-corner-all pui-button-text-icon-left" role="button" aria-disabled="false">
<span class="pui-button-icon-left ui-icon ui-icon-close">
</span><span class="pui-button-text">取消</span></button>
</div>

情况说明：

document.getElementsByClassName("pui-button-text")[3].innerText ---生效

document.getElementsByClassName("pui-button-text")[3].click() ---无反应，也不进行任何报错

说明已经找到了元素，但是为什么进行模拟点击的时候就无效呢
...全文
7170 32 打赏 收藏 转发到动态 举报
写回复
用AI写文章
32 条回复
切换为时间正序
请发表友善的回复…
发表回复
都是为了生活 2022-06-22
  • 打赏
  • 举报
 回复 1

我也遇到和你几乎相同的问题。 我是在做自动化测试的插件时遇到的，获取到用户的所有操作轨迹后进行回放时，出现一种情况：以element-ui为例，element的select组件点击时会出现一个选择弹框，点击空白处会自动关闭；当我在回放这不操作时发现只派发click时间不会自动关闭。后来看了这部分的源码，select组件绑定了一个clickoutside的指令，这个指令会收集mouseup和mousedown事件（这是干什么的请自行查看源码）；当时我也直接在click事件前先触发这两个方法，但还是不生效，后来多写了一层触发，先触发mouseenter=>mouseup=>click ；
按这种流程就没问题了。也不知道是什么原因导致的，你可以试试，派发click事件前先派发鼠标事件

叫我海王大人 2022-03-30
  • 打赏
  • 举报
 回复 2

所以2022年了，还没有答案吗。。。写个脚本代替手点，发现要用鼠标点击过以后，脚本的点击才能失效。而且每个点击元素都要手动点一下。。。

落叶️ 2021-02-16
  • 打赏
  • 举报
 回复
我也发现这个问题了，按钮无法点击，输入框无法赋值等
m0_37933338 2020-05-22
  • 打赏
  • 举报
 回复
根本不存在你说的dom没有加载的情况，答非所问，我试着对你无语了
漠子凉 2019-09-24
  • 打赏
  • 举报
 回复
引用 29 楼 eggsound 的回复:
[quote=引用 26 楼 漠子凉 的回复:] 反正是dom生成的框，你只要在它出现之后，打印能够找到那个元素，你就可以触发click()事件
我使用 if ($("xx").click)测试 是返回价值 然后用原生的模拟位置点击也是凉了~ 在看js过程中 他实际是个Confirm 对话框~~~ 所以可能这就是导致不能js点击的原因。 那么 这个是需要怎么点击确定呢 令他是返回一个true 呢？ [/quote] 窗体级别一般操作不了，不过你可以在它调用confirm这个函数之前先改写它 function confirm() { return 1; }
敲键盘的小猴子 2019-09-21
  • 打赏
  • 举报
 回复
用live('Click',function(){})
eggsound 2019-09-20
  • 打赏
  • 举报
 回复
引用 26 楼 漠子凉 的回复:
反正是dom生成的框，你只要在它出现之后，打印能够找到那个元素，你就可以触发click()事件
我使用 if ($("xx").click)测试 是返回价值 然后用原生的模拟位置点击也是凉了~
在看js过程中 他实际是个Confirm 对话框~~~ 所以可能这就是导致不能js点击的原因。
那么 这个是需要怎么点击确定呢 令他是返回一个true 呢？
eggsound 2019-09-20
  • 打赏
  • 举报
 回复
引用 26 楼 漠子凉 的回复:
反正是dom生成的框，你只要在它出现之后，打印能够找到那个元素，你就可以触发click()事件
偷懒了 直接把按钮的js 拷贝来 直接触发了
「已注销」 2019-09-20
  • 打赏
  • 举报
 回复
感谢楼主分享，学习中
xiaoxiangqing 2019-09-19
  • 打赏
  • 举报
 回复
用鼠标点正常吗？
漠子凉 2019-09-19
  • 打赏
  • 举报
 回复
反正是dom生成的框，你只要在它出现之后，打印能够找到那个元素，你就可以触发click()事件
eggsound 2019-09-19
  • 打赏
  • 举报
 回复
引用 22 楼 xiaoxiangqing 的回复:
用鼠标点正常吗？
正常的哈
eggsound 2019-09-18
  • 打赏
  • 举报
 回复

原生的话，就需要对点击的地方进行判断点击目标是否为你需要的dom
document.addEventListener('click', function(e) {
var target = e.target || e.srcElement
if(target.className == '.a') {
// 你的绑定事件回调函数
}
})[/quote]
您看下，我其实就是想点击提交后的 ，自动点击确定，但是 点击是无效的。添加了事件后 ，点击能触发事件，但实际上没有被点击[/quote]

引用 1 楼 天际的海浪 的回复:
你获取的是span元素。点击事件应该在button元素上。
用click()模拟点击事件是不会有事件冒泡的。所以要获取button元素来调用click()
大佬帮看下 14楼的图哈
eggsound 2019-09-18
  • 打赏
  • 举报
 回复

})[/quote]我就是工作需要 做个脚本 然后点击 就完事了 。不同你们，术业又专攻嘛 哈哈哈
理解了，也有点会用了 就是还想不明白 这个是事件委托 还需要我点击 才会丫 。那我是不是得在脚本前一段函数中加个延时调用才行呢？
就是我只是单纯为了点击而点击，不是点击之后得再来一堆事件code哈[/quote]

引用 12 楼 漠子凉 的回复:
一般我现在都很少会直接用onclick这种写法，无论原生或者jq
基本都是委托，就是防止这种动态生成的dom没有正确注册事件
jq的一般写法都是$(document).on('click', '.a', function() {})
原生的话，就需要对点击的地方进行判断点击目标是否为你需要的dom
document.addEventListener('click', function(e) {
var target = e.target || e.srcElement
if(target.className == '.a') {
// 你的绑定事件回调函数
}
})

您看下，我其实就是想点击提交后的 ，自动点击确定，但是 点击是无效的。添加了事件后 ，点击能触发事件，但实际上没有被点击
eggsound 2019-09-18
  • 打赏
  • 举报
 回复
引用 12 楼 漠子凉 的回复:
一般我现在都很少会直接用onclick这种写法，无论原生或者jq
基本都是委托，就是防止这种动态生成的dom没有正确注册事件
jq的一般写法都是$(document).on('click', '.a', function() {})
原生的话，就需要对点击的地方进行判断点击目标是否为你需要的dom
document.addEventListener('click', function(e) {
var target = e.target || e.srcElement
if(target.className == '.a') {
// 你的绑定事件回调函数
}
})
我就是工作需要 做个脚本 然后点击 就完事了 。不同你们，术业又专攻嘛 哈哈哈
理解了，也有点会用了 就是还想不明白 这个是事件委托 还需要我点击 才会丫 。那我是不是得在脚本前一段函数中加个延时调用才行呢？
就是我只是单纯为了点击而点击，不是点击之后得再来一堆事件code哈
漠子凉 2019-09-18
  • 打赏
  • 举报
 回复
一般我现在都很少会直接用onclick这种写法，无论原生或者jq 基本都是委托，就是防止这种动态生成的dom没有正确注册事件 jq的一般写法都是$(document).on('click', '.a', function() {}) 原生的话，就需要对点击的地方进行判断点击目标是否为你需要的dom document.addEventListener('click', function(e) { var target = e.target || e.srcElement if(target.className == '.a') { // 你的绑定事件回调函数 } })
漠子凉 2019-09-18
  • 打赏
  • 举报
 回复 

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="a">aaa</div>

	<script type="text/javascript">

// document.querySelector('.a').onclick = function() {
// 	console.log('13');
// }
document.addEventListener('click', function(e) {
	var target = e.target || e.srcElement
	if(target.className == '.a') {
		// 你的绑定事件回调函数
	}
})

var div = document.createElement('div')
div.className = 'a'
div.innerText = 'aaa'
document.querySelector('body').append(div)
	</script>
</body>
</html>
漠子凉 2019-09-18
  • 打赏
  • 举报
 回复
你直接给我看你绑定点击的事件是怎么绑定的，帮你修改一下绑定事件就可以了
eggsound 2019-09-18
  • 打赏
  • 举报
 回复
引用 8 楼 漠子凉 的回复:
元素是在点击提交后动态生成的

好吧，重点在这句话
动态生成的元素，监听事件一定要用委托方式来监听
委托一般委托到页面加载已经存在的元素
我们一般会委托给document

那我是不是应该 委托给document了 再从document触发？ 我看委托大多只是个事件
eggsound 2019-09-18
  • 打赏
  • 举报
 回复
引用 18 楼 天际的海浪 的回复:
确定你获取的元素就是你需要的那个元素，$(".pui-button-text")[3]为什么是3？还有另外的.pui-button-text元素吗？
一般事件都是绑定在button元素上的，应该直接获取button元素 $(".pui-button")
确定元素绑定的是click事件，也有可能绑定的是 mousedown 或 mouseup 事件。
$(".pui-button-text")[3]返回的是DOM对象，调用的click()是DOM对象的方法。如果事件是用jquery绑定的。应该调用jquery对象的click()方法 $(".pui-button-text").eq(3).click(); 尤其是事件用委托式绑定的情况下。
在看js过程中 他实际是个Confirm 对话框~~~ 所以可能这就是导致不能js点击的原因。
那么 这个是需要怎么点击确定呢 令他是返回一个true 呢？
加载更多回复（12）
jQuery中$.click()无效问题分析
今天做表格前台导出到xls时，想自动触发a的点击。但失败。最后找到这个文件。 我尝试过多次用jQuery模拟用户点击a标签的功能，但都没有成功，并且困扰了很久。前段时间的一次发呆，冒出了新的想法，于是就动手进行了测试。 先看下边的代码： 代码如下:  <html> <head>磨途歌-A标签测试1<head> <body>    磨途歌 </body> </html> [removed]<
Click效果测试
InvokeMember "click" 点击无效
模拟用户操作Input元素，不会触发相应事件
Javascript中input元素的一个普遍规则是，只有用户的操作，才会出发input类的各种元素的对应事件，而是使用javascript的对应方法模拟用户操作，并不会触发相应的事件。 例如对于下面的表单： <form name=”form0″> <input type=”button” value=”按钮0″ name=”b0″ onClick=”alert(‘单击按钮0’);”> </form> 当用户调用b0的click()方法来模拟用户单击按钮0时，按钮的onClick事件不会被触发，所以相应事件处理函数也不会被执行。只用用户真正的点击了按钮，事件才会被触发，事件处理函数才会被执行。
模拟用户单击事件demo
实现思路a页面 跳转b页面 点击事件写在b页面 跳转时从a页面通过url传递参数 在b页面接收参数 判断 然后执行对应的点击事件
解决vue组件中click事件失效的问题
最近使用vue学习开发移动端的项目，使用了bette-scroll插件做滚动。在引入better-scroll的组件中使用@click事件的时候，点击事件失效，v-on:click、v-bind:click、@click.native都不行，试了一下@touchstart是却是可以的，发现better-scroll的配置中没有设置click：true，设置过之后click事件成功。 后来在使用vuex的时候一直报“[vuex] unknown mutation type: changeCity”，才发现在store文件中将mutations写在了state里面，被自己蠢哭了。。。正确写法如下
JavaScript

87,995

社区成员

224,706

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章