Javascript 单击图像时页面跳转到顶部

我在页面上有很多图片，一张在另一张下面。当我单击其中一张图片时，会将其缩放，并在页面开始时刷新/跳转。我怎样才能阻止它？代码如下：

 <a href="#" style="text-decoration: none"><img src="house.jpg" id="house1" width="200" height="150" onclick="function1()">

JS:

删除

href=“#”

功能1（事件）{
var house=document.getElementById（“house1”）；
if（house.className==“mystyle”）
house.className=“mystyle2”；
其他的
house.className=“mystyle”；
//返回false；
//或
event.preventDefault（）；
}

---

之所以会发生这种情况，是因为每次使用

href=“#”

单击锚定内的图像时，都会刷新页面

只需删除

#

或使用jquery：

$('img').click(function(e) {
   e.preventDefault();
});

---

使用css position属性使其位置固定。

---

e、 g位置：固定

您可以删除

元素并仅保留

，或使用其他元素（如

或

）对其进行包装。由于您的javascript只更改样式，因此链接没有任何用途。

这里有一个语义上的、可访问的解决方案（与已经发布的解决方案不同）：

注:

• 这里没有链接，所以不要使用
  标记。使用真正的
  。这避免了所有的

  href

  恶作剧
• 将

  onclick

  从
  移动到
  。这使您可以免费使用键盘
• 给出
  alt文本。我刚刚选择了“house”，因为它是由文件名暗示的
• 最好去掉

  onclick

  属性，并从外部js文件连接JavaScript
使用javascript:void（0）；而不是锚定标签中的#
例如：

<a href="javascript:void(0)"></a>

这会对你有帮助，

---

继续编码：）
为什么需要在
周围添加
？单击return false。这将是一个链接。它已经是一个链接：到页面顶部…删除

href=“#”

并在css中使用

cursor:pointer

来显示手动光标：
向函数添加

return false

不会做任何事情，除非您将img的

onclick

属性更新为

onclick=“return function1（）

。因为

href

将浏览器发送到一个新页面，在您的情况下，链接是

#

这样做会破坏键盘的可访问性。最好将
替换为
，然后将

onclick=“function1（）”

移动到按钮上。@Angelo因为哈希符号链接到页面上的锚并滚动到它。如果不向哈希中添加标记，它会链接到body（？）标记。@danielnixon不，它不会像这样添加

tabindex=1

，除非将img的

onclick

属性更新为

onclick=“return function1（）”

，否则向函数添加

return false

不会有任何作用。（但无论哪种解释都是正确的…）然后添加e.preventDefault（）；添加

e.preventDefault（）

不会有帮助，因为

onclick=“function1（）”

不会将事件对象传递给函数。您的更新不起作用，因为

onclick=“function1”

根本不调用该函数。对不起，我将再次交叉使用。您测试过吗？它必须是

onclick=“function1（event）”

。在我看来，返回false以及对原始注释的微小更改更为简单。您是否注意到问题中的代码已经设置了

位置：已修复
，但仅在每秒钟单击一次？将其永久设置为
position:fixed
将中断对单击的响应。您需要的元素是常规的旧元素。您建议的元素都会导致可访问性问题。
 <a style="text-decoration: none"><img src="house.jpg" id="house1" width="200" height="150" onclick="function1()">

$('img').click(function(e) {
   e.preventDefault();
});

<button onclick="function1()">
    <img src="house.jpg" id="house1" width="200" height="150" alt="house">
<button>

<a href="javascript:void(0)"></a>