js知识

水平滚动条、垂直滚动条：overflow内容溢出时的设置（设定被设定对象是否显示滚动条）  overflow-x水平方向内容溢出时的设置    overflow-y垂直方向内容溢出时的设置   以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置 

offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置

事件冒泡：

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

假设一个元素div，它有一个下级元素p。
<div>
　　<p>元素</p>
</div>
这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？

两种模型
以前，Netscape和Microsoft是不同的实现方式。
Netscape中，div先触发，这就叫做事件捕获。
Microsoft中，p先触发，这就叫做事件冒泡。
两种事件处理顺序刚好相反。IE只支持事件冒泡，Mozilla, Opera 7 和 Konqueror两种都支持，旧版本的Opera's 和 iCab两种都不支持 。

阻止事件冒泡：

1. 事件目标

现在，事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器中都能够使用这个属性。通过.target，可以确定DOM中首先接收到事件的元素（即实际被单击的元素）。而且，我们知道this引用的是处理事件的DOM元素，所以可以编写下列代码：
$(document).ready(function(){
 $('#switcher').click(function(event){
  $('#switcher .button').toggleClass('hidden');
  })
 })
  
$(document).ready(function(){
 $('#switcher').click(function(event){
  if(event.target==this){
  $('#switcher .button').toggleClass('hidden');
  }
  })
 })
此时的代码确保了被单击的元素是<div id="switcher"> ，而不是其他后代元素。现在，单击按钮不会再折叠样式转换器，而单击边框则会触发折叠操作。但是，单击标签同样什么也不会发生，因为它也是一个后代元素。实际上，我们可以不把检查代码放在这里，而是通过修改按钮的行为来达到目标 。

2. 停止事件传播

事件对象还提供了一个.stopPropagation()方法，该方法可以完全阻止事件冒泡。与.target类似，这个方法也是一种纯JavaScript特性，但在跨浏览器的环境中则无法安全地使用 。不过，只要我们通过jQuery来注册所有的事件处理程序，就可以放心地使用这个方法。

下面，我们会删除刚才添加的检查语句event.target == this，并在按钮的单击处理程序中添加一些代码：

$(document).ready(function(){
 $('#switcher .button').click(funtion(event){
  //……
   event.stopPropagation();
  })
 }) 

  同以前一样，需要为用作单击处理程序的函数添加一个参数，以便访问事件对象。然后，通过简单地调用event.stopPropagation()就可以避免其他所有DOM元素响应这个事件。这样一来，单击按钮的事件会被按钮处理，而且只会被按钮处理。单击样式转换器的其他地方则可以折叠和扩展整个区域。

3. 默认操作

如果我们把单击事件处理程序注册到一个锚元素，而不是一个外层的<div>上，那么就要面对另外一个问题：当用户单击链接时，浏览器会加载一个新页面。这种行为与我们讨论的事件处理程序不是同一个概念，它是单击锚元素的默认操作。类似地，当用户在编辑完表单后按下回车键时，会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。

如果我们不希望执行这种默认操作，那么在事件对象上调用.stopPropagation()方法也无济于事，因为默认操作不是在正常的事件传播流中发生的。在这种情况下，.preventDefault()方法则可以在触发默认操作之前终止事件 。

提示 当在事件的环境中完成了某些验证之后，通常会用到.preventDefault()。例如，在表单提交期间，我们会对用户是否填写了必填字段进行检查，如果用户没有填写相应字段，那么就需要阻止默认操作。我们将在第8章详细讨论表单验证。

事件传播和默认操作是相互独立的两套机制，在二者任何一方发生时，都可以终止另一方。如果想要同时停止事件传播和默认操作，可以在事件处理程序中返回false，这是对在事件对象上同时调用.stopPropagation()和.preventDefault()的一种简写方式。

有时候在document.onclick上绑定了事件，但在单击某些地方的时候不希望触发document上的click事件，则可以在方法里阻止其事件的冒泡，例如：

var btn = document.getElementById("btn");

btn.onclick=function(event){

      alert('clicked');

      event.stopPropagation();

}

 

document.body.onclick = function(event){

      alert('body clicked');

}

 

有了event.stopPropagation();方法，就可以使在点击按钮时不触发下面的body.click事件。

在IE下不支持此方法，但可以利用其event.cancelBubble属性设置为true阻止。综上所述，例如：

var btn = document.getElementById("btn");

btn.onclick=function(event){

      alert('clicked');

      if(event.stopPropagation)

         event.stopPropagation();

      else

         event.cancelBubble = true;

}

以上代码可以兼容的解决此问题。

阻止默认行为

w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;·

preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接<a>，提交按钮<input type=”submit”>等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。

我们都知道，链接<a>的默认动作就是跳转到指定页面，下面就以它为例，阻止它的跳转：

//code from http://caibaojian.com/javascript-stoppropagation-preventdefault.html//假定有链接<a href="http://caibaojian.com/" id="testA" >caibaojian.com</a>var a = document.getElementById("testA");a.onclick =function(e){if(e.preventDefault){e.preventDefault();}else{window.event.returnValue == false;}}

来源：前端开发博客