mouseenter、mouseover;mouseleave、mouseout的区别

在jQuery里面,鼠标事件有两对比较容易混淆的。

  • mouseenter和mouseover
  • mouseleave和mouseout

既然容易混淆,把这4个重新组合一下,变成
mouseover/mouseout VS mouseenter/mouseleave

这样是不是清晰多了?至少样子上是。

mouseover/mouseout在原生JS中一直都是有的,也就是onmouseover和onmouseout事件,而且,特大好消息的是,曾经只有IE支持的onmouseenter和onmouseleave事件现在已经来到了Chrome和Firefox中:

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 30 10.0 (10) All 11.10 Not supported

要说区别,非常简单:mouseover/mouseout的事件会冒泡(event bubbling),也就是说,假设把mouseover/mouseout事件绑定到了父元素,那么它其中的任何子元素只要发生了mouseover/mouseout事件,同时也会触发父元素的mouseover/mouseout事件,父元素的父元素也会触发……然后一直向上,就像池塘的气泡一样一直往上冒。

而mouseenter/mouseleave不会发生事件冒泡,属于传统思维上的鼠标进出。

- 阅读剩余部分 -

十年之后是2013

咻~~~~~~~~~~~~~~~~~十年弹指一挥间
2013年我23岁
20上
30下

离开PConline(PC要大写喔)是一个艰难的选择,文科的东西着实难以开窍。

Javascript好有趣

PS:刚过零点,外面一点响动都没有,好像到了火星,“你怎么知道火星什么样?” --“因为我有个外号是火星人啊~~~” 洗洗睡吧。

2013 code

我的2003

2003年我十三岁
初一下
初二上

那时候听周杰伦的歌,接触是从轨迹开始的,很入戏,边听边幻想。
那时候会偷偷地把零花钱拿去买随身听,我那时居然有八十多的零花钱。还有就是买磁带。

陈一铭同学有一个电子辞典,很高级的可以播MP3,不过导入的过程实在麻烦,我在隔壁修电脑的那里一台Windows ME的电脑上面居然弄成功了,一首歌传好几分钟,然后,当传完两首,一首轨迹一首断了的弦,之后就装不下了。

那天晚上我就在教室里面借他的电子辞典听,真的好神奇,声音好纯净,貌似是我接触的第一个MP3设备。

那时候自己学习刻苦,主要还是因为家庭经济上紧张。
妈妈在县城一边摆摊,一边给我做饭。晚上睡的地方是门市旁边的一个楼梯间,就是楼梯的下面原本是用来堆杂物的那种。

那时候会攒钱买《中学生电脑》,还有电脑报,不过后者的内容太多了,要看很久才能看完,会影响学习的喔。

- 阅读剩余部分 -

绝对定位的a链接不可点击 IE6-IE9无一幸免的bug

最近遇到一个很奇怪的问题,IE6 IE7 IE8 IE9 全军覆灭。
现象:
应该是比较常见的,有时候为了让整块区域可点击,可能使用一个a标签,然后设置display:block等来让a标签可设置长宽;但是,a标签内部如果需要添加比较多的内容,比如好几个div,那么这么做就不符合规范了。
于是变通地让这个a标签设置position为绝对定位,然后移动覆盖到相应的位置来实现某个区域可点击。
如下图:

IE10以下,绝对定位的a标签不可点击bug

但是在IE10以下,a标签有的部分不可点击,比如上面部分的图片部分,鼠标移上去就变成了文本形状,而本应该是手型的。
这是一个IE系列的渲染bug,只有渲染部分是可点击的。而让其所有部分都可点击的话,简单,为其设置一个背景即可。可以设置一个透明的gif图片,不过会增加一个请求。还有一个方法是使用background:url(about:blank);得到同样的效果但是不产生http请求。

- 阅读剩余部分 -

word-break、word-wrap、word-space、white-space对比图

这几个属性不常用,而且名字看起来很相近,所以列出来,对比起来看看。然后不看不知道,一看吓一跳,真的是有点复杂,还涉及到非中文和非英文的情况,而且其中前两者还是CSS 3的属性,怪不得这么细化。下面的表格翻译自W3,假如翻译有不恰当的地方还请指出。

名称 word-break word-wrap
/overflow-wrap
word-spacing white-space
C
S
S
版本
CSS3 CSS3 CSS1 CSS1

定义

This property specifies soft wrap opportunities between letters

The word-wrap property allows long words to be able to be broken and wrap onto the next line.

The word-spacing property increases or decreases the white space between words.

 

The white-space property specifies how white-space inside an element is handled.

定义断词的方式。 对长单词,转行到下一行的方式,只在white-space允许折行的时候起效。 增加或减少
单词间的间距。
元素内的空白符的处理方式。
可取的值

normal:默认值

break-all:允许折行任意单词,Chrome和FF下,中文里面会允许标点符号折行到下一行的开头。

keep-all:不断词。

normal:默认值。约等于word-break: keep-all;

break-word:使单词可以被折行。

normal:默认值,相当于值是0;

length:使用px, pt, cm, em等单位具体定义,值可为负;

inherit:继承

normal:默认值,多个空白符显示为一个,自动折行。
nowrap:多个空白字符显示为一个,文字不自动折行,除非遇到<br />标签。
pre:空白字符被保留,就像<pre>标签一样,文本不自动折行。
pre-line:多个空白字符显示为一个,文本正常折行,换行符被保留。
pre-wrap:空白字符被保留,文本正常换行,换行符被保留。
inherit:继承

额外说明

这个有点复杂,涉及到多种语言的知识。貌似韩文是两个字一个词?

word-wrap和overflow-wrap是同一个意思,不过前者是后者的遗留名字,后者是更新的叫法。

当遇到很长的单词,比如肌联蛋白的IUPAC名的时候,overflow-wrap设置为break-word就能够自动折行了;不然屏幕就只有一行啦,慢慢拉水平滚动条吧。

当为负值的时候,只在IE7以下和FF有效,表现为单词挤在一块儿了。

这个属性说的是
单词,其实就是指定空白符的宽度。因为单词也是通过空格来隔开嘛,不然CSS怎么知道是单词还是字母。

对应
字符间距调整的属性是letter-spacing。

这个估计是最复杂的一个了,各个属性值绕来绕去的。

用的最多的时候可能就是用它的nowrap了吧。

上面的word-break有点抽象,因为涉及到其它的语言,下面补充一下断词的方法,下面的例子使用‘·’来定义断词点。

word-break: normal
这·是·一·些·汉·字,·and·some·Latin,·و·کمی·نوشتنن·عربی·และ·ตัวอย่าง·การเขียน·ภาษาไทย.

word-break: break-all
这·是·一·些·汉·字,·a·n·d·s·o·m·e·L·a·t·i·n,·و·ﮐ·ﻤ·ﻰ·ﻧ·ﻮ·ﺷ·ﺘ·ﻦ·ﻋ·ﺮ·ﺑ·ﻰ,·แ·ล·ะ·ตั·ว·อ·ย่·า·ง·ก·า·ร·เ·ขี·ย·น·ภ·า·ษ·า·ไ·ท·ย.

word-break: keep-all
这是一些汉字,·and·some·Latin,·و·کمی·نوشتنن·عربی,·และตัวอย่างการเขียนภาษาไทย.



终于大体上翻译结束,不过肯定还有需要补充的,后面再加上。自己也在这次翻译当中明白了不少,但是对于CSS 3的其余相关属性,我还不是很清楚,比如line-break,以后遇到了再补充吧。