Question

我使用<img>，设置onclick()方法，但无法调用该方法：

<!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>

为什么当我点击<img>时，它无法执行close() cody？我真的不知道如何解决这个问题。

Answer 1

正如haim770在评论（编辑;现在是an answer）中指出的那样，问题是函数的名称。全局命名空间非常拥挤，并且已经有一个close函数，你无法覆盖它。使用其他名称。

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

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

确保上面的代码在 img元素存在后运行。 （如果你必须支持过时的浏览器，如IE8 - 或IE9-11，当它们以[兼容]模式徘徊时 - see this answer。）

示例：

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

<div style="width: 300px; height: 200px;" id="img-div"> <img id="img-id" src="https://www.gravatar.com/avatar/4f8efc215ecc23017b42334c9b30c49b?s=32&d=identicon&r=PG&f=1" style="CURSOR:pointer;"> </div>

Answer 2

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

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

function closeIt() {
    // ...
};

Answer 3

问题在于名称＆＃34; close（）＆＃34;

<!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>

Answer 4

您使用的<Border BorderThickness="0, 0, 0, 2" Height="{Binding ActualHeight, ElementName=textBlock}" Width="{Binding ActualWidth, ElementName=textBlock}"> <Border.BorderBrush> <ImageBrush ImageSource="Assets/0.jpg" /> </Border.BorderBrush> <TextBlock x:Name="textBlock" FontSize="50" FontWeight="Bold"> <TextBlock.Foreground> <ImageBrush ImageSource="Assets/0.jpg" /> </TextBlock.Foreground> <Underline><Run Text="This is my text"/></Underline> </TextBlock> </Border>函数与JavaScript的原生close()函数相同，因此请使用下面的其他名称。

close()

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

4 个答案: