如何使div可点击？

Question

<div><span>shanghai</span><span>male</span></div>

如上所示的 div，在鼠标移动到其上方时，应该变为 cursor:pointer，并在点击时触发一个 javascript 函数，如何完成这项工作？

编辑：当鼠标悬停时，如何更改 div 的背景颜色？

再次编辑：如何使第一个 span 的宽度为120px？在 Firefox 中似乎不起作用。

- omg

---

为什么不使用a标签来创建链接呢？如果你将a标签的display属性设置为block，它就会像div一样表现。这种解决方案更具语义化。你仍然可以在a标签上添加下面答案中提到的事件监听器。 - Reeno

Answer 1

给它一个ID，比如"something"，然后:

var something = document.getElementById('something');

something.style.cursor = 'pointer';
something.onclick = function() {
    // do something...
};

更改背景颜色（根据您更新的问题）：

something.onmouseover = function() {
    this.style.backgroundColor = 'red';
};
something.onmouseout = function() {
    this.style.backgroundColor = '';
};

- James

---

记得在window.onload事件内执行此操作。 - alexn

或者将脚本放置在被定位元素的下方。 - James

顺便问一下，如何将第一个<span>的宽度设置为120px？ - omg

为什么内联元素无法设置宽度？ - omg

关于背景颜色，最好在CSS样式表中进行设置：.class:hover{background:#bbb;} - Hank

Answer 2

<div style="cursor: pointer;" onclick="theFunction()">

这是最简单的有效方法。

当然，在最终的解决方案中，应该将标记与样式（CSS）和行为（JavaScript）分离 - 阅读A List Apart上关于标记设计的良好实践，不仅可以解决特定问题，还可以在标记设计方面受益。

- macbirdie

---

当鼠标悬停时，如何更改 div 的背景颜色？ - omg

在 CSS 上添加悬停效果。 - CharybdeBE

Answer 3

其中最简单的一个：

<div onclick="location.href='where.you.want.to.go'" style="cursor:pointer"></div>

- Bouramas

Answer 4

我建议使用jQuery：

$('#mydiv')
  .css('cursor', 'pointer')
  .click(
    function(){
     alert('Click event is fired');
    }
  )
  .hover(
    function(){
      $(this).css('background', '#ff00ff');
    },
    function(){
      $(this).css('background', '');
    }
  );

- Liu Peng

---

正如在上面的评论中所提到的，为什么要为这样一个简单的事情使用框架呢？ - Jesper Haug Karsrud

如果你的项目中有许多简单的事情，我认为一个好的框架可以节省大量时间。 如果你想要一个JavaScript框架，jQuery是最佳选择 :) - Liu Peng

Answer 5

我建议使用一个名为clickbox的CSS类，并通过jQuery来激活它：

$(".clickbox").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
 });

现在唯一需要做的就是将您的 div 标记为可点击并提供链接：

<div id="logo" class="clickbox"><a href="index.php"></a></div>

添加CSS样式以更改鼠标光标：

.clickbox {
    cursor: pointer;
}

很容易，不是吗？

- cldrr

Answer 6

添加onclick属性

<div onclick="myFunction( event );"><span>shanghai</span><span>male</span></div>

要改变鼠标指针，使用CSS的cursor规则。

div[onclick] {
  cursor: pointer;
}

选择器使用了属性选择器，在某些版本的IE中不起作用。如果您想支持这些版本，请为您的div添加一个类。

- Bjorn

---

为什么这个显眼？它做了原帖所要求的事情。 - JonoW

Answer 7

因为您更新了问题，所以这里提供一个具有障碍性的示例：

window.onload = function()
{
    var div = document.getElementById("mydiv");

    div.style.cursor = 'pointer';
    div.onmouseover = function()
    {
        div.style.background = "#ff00ff";
    };
}

- alexn

Answer 8

<div style="cursor: pointer;" onclick="theFunction()" onmouseover="this.style.background='red'" onmouseout="this.style.background=''" ><span>shanghai</span><span>male</span></div>

这也将改变背景颜色

- Rakesh Juyal

Answer 9

如果这个div是一个函数，我建议在你的样式中使用cursor:pointer，例如style="cursor:pointer"，并且可以使用onclick函数。

像这样：

<div onclick="myfunction()" style="cursor:pointer"></div>

不过我建议您使用像jquery或extjs这样的JS框架

- pedrofernandes

---

为什么他/她要为了如此简单的事情使用整个框架！？！？ - James

cursor:hand在除IE以外的浏览器上不太好用。cursor:pointer是实现“手形”光标的跨浏览器方式。 - Dan F