英文:
jQuery I can't access to getAttribute attribute in e.currentTarget
问题
我正在使用带有setTimeout的箭头函数，但在访问被点击元素的getAttribute时遇到问题。
可能导致此问题的原因是什么？
let myTimeout;
const time = 2000;
$(document).on("touchstart", "figure img", (e) => {
myTimeout = setTimeout(function(e) {
var figure = e.currentTarget;
var img = figure.querySelector("img");
var src = img.getAttribute("src");
console.log("src>" + src);
console.log("PRESS DELAY");
}, time);
});
<section>
<figure>
<img src="https://picsum.photos/536/354" />
</figure>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
英文:
I am using an arrow function with setTimeout and am having issues accessing the getAttribute of the clicked element.
What could be the cause of this issue?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let myTimeout;
const time = 2000;
$(document).on("touchstart", "figure img", (e) => {
myTimeout = setTimeout(function(e) {
var figure = e.currentTarget;
var img = figure.querySelector("img");
var src = img.getAttribute("src");
console.log("src>" + src);
console.log("PRESS DELAY");
}, time);
});
<!-- language: lang-html -->
<section>
<figure>
<img src="https://picsum.photos/536/354" />
</figure>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- end snippet -->
答案1
得分: 3
以下是翻译好的部分：
问题在于
-
您的事件监听器已经将
e设置为img（因为您使用了"figure img"），所以当您执行figure = e.currentTarget; img = figure.querySelector('img')时，它试图查找 img 元素的子元素 img，这是没有意义的。 -
setTimeout中的函数会遮蔽e变量，因此在该函数内部e将为未定义。
应该像这样：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let myTimeout;
const time = 2000;
$(document).on("touchstart", "figure img", (e) => {
myTimeout = setTimeout(function() {
var img = e.target;
var src = img.getAttribute("src");
console.log("src>" + src);
console.log("PRESS DELAY");
}, time);
});
<!-- language: lang-html -->
<section>
<figure>
<img src="https://picsum.photos/536/354" />
</figure>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- end snippet -->
希望这对您有所帮助。
英文:
The issues are that
-
your event listener is setting
etoimgalready (since you did"figure img", so when you dofigure = e.currentTarget; img = figure.querySelector('img')it's trying to find a child img of the img, which doesn't make sense. -
the function in
setTimeoutis shadowing theevariable, soewill be undefined inside of that function.
It should look like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let myTimeout;
const time = 2000;
$(document).on("touchstart", "figure img", (e) => {
myTimeout = setTimeout(function() {
var img = e.target;
var src = img.getAttribute("src");
console.log("src>" + src);
console.log("PRESS DELAY");
}, time);
});
<!-- language: lang-html -->
<section>
<figure>
<img src="https://picsum.photos/536/354" />
</figure>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论