2010-7-29 Update: 在第一种实现方案中，如果图片的父元素设置了padding、margin之后，就会使得FF、Chrome等逻辑判断失误，而IE还完好。 ———————-纠错分界线————————– 说“图片导航”或许很迷糊，我也迷糊不知道怎么描述，就是类似于Google、QQ空间、百度图片搜索中的在图片中出现上下箭头或者左右箭头来指示下一个和上一个图片的功能。昨天同事问到我这方面的实现方式，也就暂时想了两种。 之前查看过Google的方法是在图片上添加两个HTML元素作为逻辑操作对象（包括切换鼠标样式、点击事件等），这样就显得比较复杂了，需要确定图片的在页面中的位置、图片的宽高、之后还要判断鼠标的位置……QQ空间的相册导航，是在图片本身来操作逻辑的，这同我第一种方案很类似，而百度图片搜索结果页中图片导航是在图片的父元素中做逻辑的，这样就避免了图片大小对导航的干扰的问题（主要是如果图片太小，在图片上做导航就显得迷糊了，特别是鼠标的样式切换）。下面来说说我的方法。 第一种，直接在图片上做逻辑。事件参数e有这么两个参数，在FF等浏览器下是layerX,layerY，在IE下是offsetX,offsetY，用于在一个DOM元素触发事件的时候，鼠标在该元素上的偏移量。这个是好方法啊，在结合offsetHeight和offsetWidth，就可以直接在图片上做判断了，给图片添加mousemove、onclick事件来处理鼠标样式切换、点击事件逻辑等等。《测试用例1》，可是这种方法的一个缺点是：在IE6下，当鼠标移动到鼠标的时候，会默认的弹出一个框，很杯具。 第二中方式就是根据上面的技巧，在图片上覆盖一个div（或者其他的能覆盖的元素都成），覆盖就得获取到图片在页面中的坐标以及宽高了，通过offsetLeft和offsetTop可以方便的得到，兼容性也还好，对于不是非常复杂的DOM结构和CSS布局，应该都是没啥问题的。《测试用例》，这样就避免了IE6下弹出框的问题。不过这样代码就得写多几行了。 具体的实现方式可以查看上面给出了两个实例。
这几天在负责帮助中心改版的项目，其中左栏(浏览下面的测试页面)有一个显示隐藏导航的功能，这个跟scrollTab不同了，它只涉及到一个ul显示隐藏，并且还是li的childNodes，所以可以给li添加事件，来触发ul的显示隐藏。 由于公司内使用YUI作为开发的基础库，所以开始的时候也就从YUI的delegate事件来实现功能了：《效果页面》，并且下面的代码有一个优化效果：记录前面点击过的元素，在点击下一个tab的时候隐藏之前点击过的tab。 [javascript] <script src="http://k.kbcdn.com/global/utilities/utilities_1_4_24.js"></script> <script> (function(){ var _E=YK.E,_D=YK.D,tempEl=null; YK.load(["event-delegate"],function(){ if(_D.inDocument("question-catagroy")){ _E.delegate("question-catagroy","click",function(e,matchEl,root){ if(matchEl.className === "catagroy-title"){ var temp=null; temp=matchEl.parentNode; if(!tempEl){ tempEl=_D.getFirstChild(root); … 了解更多
今天在重新看《javascript高级程序设计》的时候，当翻到关于事件的那章，那里讲述了键盘的几个事件（keydown，keyuup，keypress）以及IE跟其他主流浏览器在事件属性方面的异同，另一方面也想到了YUI中也有这么监听键盘事件功能的类，所以自己也就简单尝试去实现另外一种操作方式的类：KeyEvent。示例如下： [javascript] var Event = { type: "keydown", data: { name: "Supersha" } } onload = function(){ //表示需要同时按下shift、ctrl以及1键keydown事件程序才会生效。 var key … 了解更多
昨晚在《Javascript权威指南》书本中看到了“合成事件”这样的一个名词，开始怎么都不明白，看了它提供的例子，也都是糊里糊涂，不知道这样使用有什么作用，直到今天，上网几番查找，都没有讨论它的用处，都是简单介绍了createEvent，createEventObject等等方法的语法，都没有现成Demo来说明它的用途。时间从上午到了下午，最后还是回到了书本中，又重新看了一下《Javascript权威指南》中提供的例子，照着书本写例子来测试，第一次发现可以动态声明事件，类似于addEventListener和attachEvent的用途，发现的端倪，继续深入。之后继续上网查资料，发现了“模拟事件”，这个名词，哟和！！突然有些豁然开朗，对，“模拟事件”，因此就尝试在HTML元素行内声明事件，之后用createEvent和createEventObject生成新事件，在window.onload回调函数下测试，模拟成功！终于明白了它的这一点用途了，也开始想到了jQuery中的trigger函数的原理了！ 下面来看看我写的一个封装的imitateEvent对象： [javascript] /* elem：是DOM元素引用，将要添加模拟事件的DOM元素 eventType：需要模拟的事件的类型 handler：事件回调函数，这个函数可有可无。 */ var imitateEvent = {}; imitateEvent.imitate = function(elem, eventType, handler){ elem = typeof … 了解更多
Lazy Definition Pattern是这样的一个模式：根据浏览器之间的解析javascript的差异性，使得创建封装的对象或者是函数的时候都需要使用浏览器的嗅探技术来做判断，而且对象或者方法每调用一次就需要去嗅探，这是一个非常不好的额外功。而解决这个瓶颈的方法之一就是Lazy Definition了。它会在浏览器第一次执行该对象或者函数的时候就记住这次的操作，以至于下面的重复调用不会再去执行浏览器的嗅探。让我们先从一个简单的addListener封装函数来一步步分析。 我们通常封装浏览器的添加事件函数的方式是使用下面的方式： [javascript] var addListener=function(el, type, handle) { if (el.addEventListener) { el.addEventListener(type, handle, false); }else if (el.attachEvent) … 了解更多
基于自己对YUI3中on方法的喜爱，忍不住想要去自己实现它，早期本人开发了一个cSelector库，这个库是用来通过selectors来查询DOM的，类似与jQuery的selectors功能。因此，想要实现on的操作方式就非常简单了，首先说明一下YUI中on方法的语法： [javascript] Y.on(type,fn,id,context); [/javascript] id不单止是一个HTML中的id而已，它可以是css2、3中的selectors，组合查询DOM，将查询到的DOM元素添加type驱动事件fn。这种思想非常的不错。也是自己想要去模仿它的原因，一个是实践，另一个也是加深对它的思想的理解。 cSelector库中支持普通的selector，比如： [css] #id .class first-child last-child nth-child > tag only-child *= $= ^= [attr] [/css] … 了解更多