Javascript 为什么img上的onclick处理程序不起作用？_Javascript_Html

Javascript 为什么img上的onclick处理程序不起作用？

javascript html

Javascript 为什么img上的onclick处理程序不起作用？,javascript,html,Javascript,Html,我使用，set onclick方法，但它无法调用该方法：为什么当我点击时，它不能执行关闭cody？我真的不知道如何解决这个问题。问题出在名字上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Date</title> </head> <body> <div style="width:

我使用，set onclick方法，但它无法调用该方法：

为什么当我点击时，它不能执行关闭cody？

我真的不知道如何解决这个问题。

问题出在名字上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date</title>
</head>
<body>
<div style="width: 300px; height: 200px;" id="img-div" >
    <img id="img-id"  src="resources/01.jpg" width="200px" height="80px"  style="CURSOR:pointer;" onclick="close();"> 
</div>
<script  type="text/javascript">
    function close(){

        console.log('js');

        alert(111);
    }

</script>
</body>
<html>

问题出在名字上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date</title>
</head>
<body>
<div style="width: 300px; height: 200px;" id="img-div" >
    <img id="img-id"  src="resources/01.jpg" width="200px" height="80px"  style="CURSOR:pointer;" onclick="close();"> 
</div>
<script  type="text/javascript">
    function close(){

        console.log('js');

        alert(111);
    }

</script>
</body>
<html>

正如haim770在评论编辑中指出的那样；现在，问题是函数的名称。全局名称空间非常拥挤，其中已经有一个无法重写的封闭函数。使用不同的名称

这是不使用onxyz属性样式事件处理程序的众多原因之一：它们要求函数是全局函数。相反，使用不需要使用全局变量的现代事件处理：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date</title>
</head>
<body>
<div style="width: 300px; height: 200px;" id="img-div" >
    <img id="img-id"  src="resources/01.jpg" width="200px" height="80px"  style="CURSOR:pointer;" onclick="closing();"> 
</div>
<script  type="text/javascript">
    function closing(){

        console.log('js');

        alert(111);
    }

</script>
</body>
<html>

确保以上代码在img元素存在后运行。如果你必须支持像IE8或IE9-11这样的过时浏览器，当它们在兼容模式下步履蹒跚时-

例如：

document.getElementByIdimg-id.addEventListenerclick，函数{ //…你的代码在这里。。。警报点击； }，假；

正如haim770在评论编辑中指出的那样；现在，问题是函数的名称。全局名称空间非常拥挤，其中已经有一个无法重写的封闭函数。使用不同的名称

这是不使用onxyz属性样式事件处理程序的众多原因之一：它们要求函数是全局函数。相反，使用不需要使用全局变量的现代事件处理：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date</title>
</head>
<body>
<div style="width: 300px; height: 200px;" id="img-div" >
    <img id="img-id"  src="resources/01.jpg" width="200px" height="80px"  style="CURSOR:pointer;" onclick="closing();"> 
</div>
<script  type="text/javascript">
    function closing(){

        console.log('js');

        alert(111);
    }

</script>
</body>
<html>

确保以上代码在img元素存在后运行。如果你必须支持像IE8或IE9-11这样的过时浏览器，当它们在兼容模式下步履蹒跚时-

例如：

document.getElementByIdimg-id.addEventListenerclick，函数{ //…你的代码在这里。。。警报点击； }，假；您已经使用了close函数，它与JavaScript的本机close函数相同，所以请使用另一个名称，如下所示

日期函数关闭函数{ console.log'js'；警报111； } 您已经使用了close函数，它与JavaScript的本机close函数相同，所以请使用另一个名称，如下所示

日期函数关闭函数{ console.log'js'；警报111； }

在全局上下文窗口中定义名为close的函数时，对于浏览器，实际上是将其定义为window.close。但是，由于window.close是为关闭当前窗口而保留的，因此它们会发生冲突

将名称更改为不太通用的名称：

document.getElementById("img-id").addEventListener("click", function() {
    // ...your code here...
}, false);

将名称更改为不太通用的名称：

document.getElementById("img-id").addEventListener("click", function() {
    // ...your code here...
}, false);

由于浏览器已经为关闭当前窗口定义了window.close，因此您最好将close更改为somethingElse@haim770很好，你的答案很好。因为浏览器已经定义了window.close来关闭当前窗口，所以你最好更改为closesomethingElse@haim770很好，你的答案很好。