标签: javascript-events

Javascript单击多个元素上的事件侦听器并获取目标“rel”属性

代码:

var articles = document.getElementsByTagName('li');
for (var i = 0; i < articles.length; i++) {
    articles[i].addEventListener('click',redirect,false);
}
function redirect(){
    alert(this.rel);
}
Run Code Online (Sandbox Code Playgroud)

此代码适用于属性 id,但不适用于属性 rel。谁能帮我获得 rel 属性?

javascript javascript-events

0
推荐指数
1
解决办法
446
查看次数

捕获 window.onbeforeunload 的结果

我有一个场景,当用户在 window.onbeforeunload 上单击“是”时,我必须保存更改,因为我需要提交表单,选择“否”时不应发生任何事情。

非常感谢任何帮助

我试过这个

window.onbeforeunload= function(){
    var r = confirm("Are you sure you want to leave this page?");
    if (r == true) {
        readForm.action = '/SREPS/read.do' ;
        readForm.submit();
    }else{
        return false;
    }
}
Run Code Online (Sandbox Code Playgroud)

当我们在 window.confirm 期间点击 Cancel 时,它并没有 100% 工作。出现另一个对话框,说来自网页的消息错误,要求确认离开此页面并停留在此页面上。在这种情况下,如果用户选择离开此页面。我无法提交表格。

javascript jquery javascript-events

0
推荐指数
1
解决办法
2808
查看次数

单击输入类型=搜索时重置按钮的任何事件?

是否有任何可用于单击 html5 搜索输入元素上出现的重置按钮的事件?

html javascript jquery javascript-events

0
推荐指数
1
解决办法
1896
查看次数

IntersectionObserver方法不起作用-Javascript

我有一个div,当它滚动到视口时,我想更改颜色,而我正在尝试使用新的junctionObserver方法实现这一点。我已经在config回调中设置了参数,但是似乎无法让观察者自己添加类来更改背景颜色?

任何帮助都将是惊人的。

codepen:https://codepen.io/emilychews/pen/mXVBVK

const config = {
  root: null, 	// sets the framing element to the viewport
  rootMargin: '0px',
  threshold: 0.5
};

const box = document.getElementById('box');

let observer = new IntersectionObserver(function(entries) {
  observer.observe(box);
  entries.forEach(function(item){
    item.classList.add("active");
  });
}, config);
Run Code Online (Sandbox Code Playgroud)
body {
  margin: 0; padding: 0;
  display:flex;
  justify-content: center;
  align-items: center;
  height: 300vh;
}

#box {
  width: 100px; 
  height: 100px;
  background: blue;}

.active {background: red;}
Run Code Online (Sandbox Code Playgroud)
<div id="box"></div>
Run Code Online (Sandbox Code Playgroud)

html javascript scroll javascript-events intersection-observer

0
推荐指数
1
解决办法
4330
查看次数

ionic 3中的touchstart和touchend事件

我正在Ionic 3中寻找单独的事件处理程序,以开始和结束对移动应用程序上HTML元素的触摸。

我发现了许多相关且已解决的问题,但对于Ionic 3却没有,目前似乎仅支持“点击,按下,平移,滑动,旋转和捏合”(https://ionicframework.com/docs/components/#gestures) 。这些似乎都没有在开始时提供“处理程序”,而只是在结束时提供了“处理程序”。我看到,然后它们确实提供了触摸持续时间(deltaTime)的数据,但是到那时为止,这对我而言毫无用处。

要获得更多背景信息,我想清除的是在第一次触摸某个元素的确切时间里的相关超时,然后查看同一特定元素上的触摸是否在一定时间内(例如250毫秒,以便可以将其评估为“点击”)。

例如这样的事情:

JS:

timeout_1 = setTimeout(function() {
    // do something if timeout_1 not cleared by touch start
}, 4000);

touched(event) {
    clearTimeout(timeout_1);
    touching_x = true
    timeout_2 = setTimeout(function() {
        touching_x = false
        // store event details and do other things if timeout_2 not cleared by touch end
    }, 250);
}

touch_ended(event) { 
    if (touching_x==true) {
        clearTimeout(timeout_2);    
        // store event details and do some other things
    }
}
Run Code Online (Sandbox Code Playgroud)

HTML:

<button ion-button type="button" (button_touch_started) = …
Run Code Online (Sandbox Code Playgroud)

html javascript-events touch touchstart ionic3

0
推荐指数
1
解决办法
6807
查看次数

处理"无法读取属性'addEventListener'的null"错误的最佳方法

目前我所做的是检查页面中是否存在元素.但是我的代码有很多条件,因为那样.当元素不存在时,Jquery事件侦听器不会显示错误.jquery如何处理这个以及我可以使用哪些texniques进行更好的设计?

var el = document.getElementById('el');
var another_el = document.getElementById('another_el');

if(another_el){
el.addEventListener('click', swapper, false);
}

if(el){
  el.addEventListener('click', swapper, false);
}
....
...
Run Code Online (Sandbox Code Playgroud)

javascript jquery event-handling javascript-events

0
推荐指数
1
解决办法
88
查看次数

意外调用Javascript中的函数

我不是很擅长JavaScript,所以我在这里问.

下面是一个示例代码.

<html>
<head>
<script>
function test(one)
{
alert('surprise! first function with one parameter');
}

function test(one,two)
{
alert('expected: second function with two parameters');
}
</script>
</head>
<body onload="javascript:test('first')">
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

问题:

我预计那'surprise! first function with one parameter'会被警告onload,因为我只用一个参数调用该函数.令我惊讶的是,它在第​​二个功能中发出警报.

  • 有人可以向我解释这个原因吗?
  • 我怎么能绕过它呢?

javascript javascript-events

-1
推荐指数
1
解决办法
180
查看次数

JavaScript脚本在Firefox中不起作用

我有一个旧函数,它缺少Mozilla/Firefox的行,因此JavaScript无法正常工作.该功能跟踪鼠标坐标,以便我可以定位窗口.

如何让代码在Firefox中运行?

Xoffset = -60; // modify these values to ...
Yoffset = 20; // change the popup position.
var old, skn, iex = (document.all),
    yyy = -1000;

var ns4 = document.layers
var ns6 = document.getElementById && !document.all
var ie4 = document.all

if (ns4) skn = document.dek
else if (ns6) skn = document.getElementById("dek").style
else if (ie4) skn = document.all.dek.style
if (ns4) document.captureEvents(Event.MOUSEMOVE);
else {
  skn.visibility = "visible"
  skn.display = "none"
}
document.onmousemove = get_mouse;


function popup(msg, bak) {
  var content …
Run Code Online (Sandbox Code Playgroud)

javascript firefox dom javascript-events

-1
推荐指数
1
解决办法
3852
查看次数

在div中验证href

我有这种类型的标记

<div class="box" href="pic-gallery/img01.jpg">
  <div>----------</div>
</div>
Run Code Online (Sandbox Code Playgroud)

现在,当我要验证它时,它显示错误,因为不允许在div内部使用href.那么如何验证这个错误?我曾经使用过

<div class="box" onclick="href='pic-gallery/img01.jpg'"></div>
Run Code Online (Sandbox Code Playgroud)

但它没有打开图像,因为图片正在通过fancybox.所以请帮助我.任何帮助和建议将是非常值得注意的.

html validation markup javascript-events fancybox

-1
推荐指数
1
解决办法
3081
查看次数

javascript函数什么是范围和为什么使用$

可能重复:
为什么JavaScript变量以美元符号开头?

我不确定$ scope和$ defer是什么,但他们似乎只是工作.

function xyz($scope, $defer) {
    xyz = this;
    this.defer = $defer;
    this.scope = $scope;
    this.scope.test = function(re) {
        console.log(this,arguments);
    }
}
Run Code Online (Sandbox Code Playgroud)

javascript javascript-events

-1
推荐指数
2
解决办法
2068
查看次数