求助大佬,原生js怎么监控点击事件并传值

JavaScript014

求助大佬,原生js怎么监控点击事件并传值,第1张

很简单,把id写入到这个按钮里面就好了。例如:

<input data-id="6" value="删除">

然后通过xx.getAttribute("data-id")来获取。如果你用jQuery的话直接$(this).attr("data-id")来获取。

这里的data-id是你自己随意定义的,只要不和其他的属性名冲突就好。有些人习惯写item-id随便你的喜好了。

js监视滚动事件的函数是onscroll

js语法:element.onscroll = functionReference

html语法:<element onscroll="myScript">

vue监听滚动事件实现滚动监听的制作步骤:

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> <style type="text/css"> #box {  width: 100%  height: 2000px } </style></head><div id="box"></div><body> <!-- vue监听滚动事件 --> <script type="text/javascript"> var vm = new Vue({   el:'#box',  data() {   return {    scroll: ''   }  },  methods: {   menu() {    this.scroll = document.body.scrollTop    console.log(this.scroll)   }  },  mounted() {   window.addEventListener('scroll', this.menu)  }, }) </script></body></html>

在js中,需要监听iframe的点击事件,但是因为浏览器的同源策略,是无法监听到的,只能另辟蹊径去解决它 注意,仅限于pc网站,意思就是必须要有鼠标移入移出iframe的操作<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html charset=ISO-8859-1"> <title>Detect IFrame Clicks</title> <script src="./jquery-3.4.1.min.js"></script> <script type="text/javascript">     $(document).ready(function() {         var currentObj=Object         var isOverIFrame = false         function processMouseOut(e) {             console.log('out iframe',e.target)             currentObj=e.target             isOverIFrame = false             top.focus()         }         function processMouseOver(e) {             // log("IFrame mouse >> OVER << detected.")             console.log('in iframe',e.target)             currentObj=e.target             isOverIFrame = true         }         function processIFrameClick(event) {             if(isOverIFrame) {                 console.log('click iframe',event.target,currentObj)             }         }         function attachOnloadEvent(func, obj) {             if(typeof window.addEventListener != 'undefined') {                 window.addEventListener('load', func, false)             } else if (typeof document.addEventListener != 'undefined') {                 document.addEventListener('load', func, false)             } else if (typeof window.attachEvent != 'undefined') {                 window.attachEvent('onload', func)             } else {                 if (typeof window.onload == 'function') {                     var oldonload = onload                     window.onload = function() {                         oldonload()                         func()                     }                 } else {                     window.onload = func                 }             }         }         function init() {             var element = document.getElementsByTagName("iframe")             for (var i=0 i<element.length i++) {                 element[i].onmouseover = processMouseOver                 element[i].onmouseout = processMouseOut             }             if (typeof window.attachEvent != 'undefined') {                 top.attachEvent('onblur', processIFrameClick)             }             else if (typeof window.addEventListener != 'undefined') {                 top.addEventListener('blur', processIFrameClick, false)             }         }         attachOnloadEvent(init)     }) </script> </head> <body> <iframe src="https://www.hao123.com" width="80%" height="600px"></iframe> <iframe src="https://www.baidu.com" width="80%" height="600px"></iframe> </form> </body> </html>复制上边整段html,打开console控制台,即可解决这个问题,亲测好用