javascript中的事件处理函数中的return false/true问题

Posted 2023-04-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript中的事件处理函数中的return false/true问题相关的知识，希望对你有一定的参考价值。

就是javascript里事件处理函数中 return false /true 什么意思
这是我在网上找的答案（还不是太明白）
在所有的事件(onkeypress、onmouseover、onclick等）处理代码里面，如果最后一个处理语句的结果为false，则原定的事件停止执行（所写的代码取代原来的功能），否则原定的事件继续执行（所写的代码添加在原来功能的前面）。
我还买了本书
书中有个例子我不太明白例子如下
<html>
<head>
<title>onerror</title>
<script language="javascript">
window.onerror = function()
alert("出错啦！");
return true; //屏蔽系统事件

</script>
</head>
<body onload="nonExistent()">
</body>
</html>
复制代码例子的效果是
弹出出错啦窗口
不弹出ie的错误窗口

按照网上找的答案 return true 的时候原定的事件继续执行,所写的代码添加在原来功能的前面.
我认为原定的事件就是弹出ie的错误窗口,可是return true 时却不弹出ie的错误窗口.
而改为return false时却弹出ie的错误窗口.
大家来说说怎么回事.
代码后面"复制代码"四个字大家不用管 ,是我复制的时候不小心多复制上去的。

如果有人愿意告诉我答案的话能留下qq吗我好问你谢谢了

1楼的能说详细点吗还是不明白

2楼的还是不太明白
希望还有高人出现谢谢大家的热心了

看来JavaScript的事件机制你还不是很明白呢
你这里事没有搞懂window.onerror的含义，所以，你认为return false才是阻止事件的发生。不过实际上，你的想法是错误的。onerron就是在发生错误的时候捕获错误交给程序员来处理，你return false就是代表不处理，那么自然会报错。
你可以把这段代码复制上去看看效果
window.onerror = function(msg,url,line)
if(onerror.num ++ < onerror.max)
alert('发生错误：' + msg + '\n地址：' + url + '\n行数：' + line);
return true;

onerror.num = 0;
onerror.max = 3;
你还可以看看JavaScript操作dom怎么阻止默认事件的，还有事件的传播等等，会对你有所帮助参考技术A 不会啊..这里会弹出出错了的提示.

因为你没有nonExistent()这个函数.当然,在你忽略了错误的时候,它不执行下去了.

Javascript - 事件处理程序中的箭头函数？

【中文标题】Javascript - 事件处理程序中的箭头函数？【英文标题】：Javascript - arrow functions this in event handler? 【发布时间】：2016-08-23 06:56:10 【问题描述】：

我是 ES6 的新手，不能完全让它工作：

$(this) 在点击时返回未定义？

dom.videoLinks.click((e) => 
            e.preventDefault();
            console.log($(this));
            var self = $(this),
                url = self.attr(configuration.attribute);

            eventHandlers.showVideo(url);

            // Deactivate any active video thumbs
            dom.videoLinks.filter('.video-selected').removeClass('video-selected');

            // Activate selected video thumb
            self.addClass('video-selected');
        );

但是，如果我将其更改为不是像这样的 箭头函数，它会按预期工作吗？：

dom.videoLinks.click(function(e) 
            e.preventDefault();
            console.log(this);
            console.log($(this));
            var self = e.this,
                url = self.attr(configuration.attribute);

            eventHandlers.showVideo(url);

            // Deactivate any active video thumbs
            dom.videoLinks.filter('.video-selected').removeClass('video-selected');

            // Activate selected video thumb
            self.addClass('video-selected');
        );

如果我在回调中使用箭头函数，我该怎么做呢？

【问题讨论】：

【参考方案1】：

使用箭头函数作为回调，而不是使用this来获取处理程序绑定的元素，您应该使用event.currentTarget。箭头函数内this 的值取决于箭头函数的定义位置，而不是使用位置。所以从现在开始，请记住那 event.currentTarget 总是指 DOM 当前正在处理其事件监听器的元素。

.currentTarget 与 .target

使用event.currentTarget 而不是event.target，因为事件冒泡/捕获：

event.currentTarget- 是附加了事件监听器的元素。 event.target- 是触发事件的元素。

From the documentation:

currentTarget 类型为EventTarget，只读用于表示 EventTarget 其EventListeners 当前正在处理中。这在捕获和冒泡期间特别有用。

检查基本示例在下面的sn-p

var parent = document.getElementById('parent');
parent.addEventListener('click', function(e) 
  
  document.getElementById('msg').innerHTML = "this: " + this.id +
    "<br> currentTarget: " + e.currentTarget.id +
    "<br>target: " + e.target.id;
);

$('#parent').on('click', function(e) 

  $('#jQmsg').html("*jQuery<br>this: " + $(this).prop('id')
                   + "<br>currenTarget: " + $(e.currentTarget).prop('id') 
                   + "<br>target: " + $(e.target).prop('id'));
);

$('#parent').on('click', e => $('#arrmsg').html('*Arrow function <br> currentTarget: ' + e.currentTarget.id));

#parent background-color:red; width:250px; height:220px;
#child background-color:yellow;height:120px;width:120px;margin:0 auto;
#grand-child background-color:blue;height:50px;width:50px;margin:0 auto;
#msg, #jQmsg, #arrmsg font-size:16px;font-weight:600;background-color:#eee;font-family:sans-serif;color:navy;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div id="parent">Parent-(attached event handler)<br><br>
    <div id="child"> Child<br><br>
      <p id="grand-child">Grand Child</p>
    </div>
  </div>
 
  <div id="msg"></div><br>
  <div id="jQmsg"></div><br>
  <div id="arrmsg"></div>

【讨论】：

【参考方案2】：

你不会的。

改变this的值是使用箭头函数的要点。

如果您不想这样做，那么箭头函数就是不适合这项工作的工具。

【讨论】：

【参考方案3】：

即使在箭头函数内部，您也可以使用$(event.target) 代替$(this)。箭头函数保留了定义它们的范围的this。在您的情况下，它是undefined。

【讨论】：

【参考方案4】：

箭头函数和这个选择器？

箭头函数从封闭上下文中保留this。例如。

obj.method = function()
    console.log(this);
    $('a').click(e=>
            console.log(this);
    )
;
obj.method(); // logs obj
$('a').click(); // logs obj

那么，如果我在回调中使用箭头函数，我该怎么做呢？

您已经可以 - 要访问事件目标，您可以使用 $(e.target) 之类的东西，但要注意冒泡。所以我建议使用普通函数作为回调。

【讨论】：

以上是关于javascript中的事件处理函数中的return false/true问题的主要内容，如果未能解决你的问题，请参考以下文章

javascript中的事件处理函数中的return false/true问题

探究JavaScript中的五种事件处理程序

在事件处理函数中的 this

JS 中的事件绑定事件监听事件委托

javascript中的正确错误处理------------引用