日度归档:2020年2月23日

html布局中为什么不提倡使用table布局呢?


摘要:
下文讲述html中使用table布局的优点和缺点,如下文所述


table布局的优点

1.table标签布局,会产生大量的 td tr标签占用更多的html代码。使页面变大

2.table布局会阻挡浏览器加载的速度和渲染顺序

3.table中拷贝文字,在IE和其它浏览器中,会出现不同的效果

4.table布局后,无法进行布局修改

5.table布局后,无法快速的编写自适应布局


table布局的缺点

table对无css基础的初学者,可以实现快速网页布局

css3 pointer-events属性简介说明


摘要:
下文讲述css3中 pointer-events属性的相关说明,如下所示:


pointer-events属性功能说明

css pointer-events属性功能:
将对象变为不可用(使用css开启disabled),此属性可以禁用超链接跳转,按钮点击,input 不可以用 等。
css pointer-events属性之属性值说明:

属性值列举说明
pointer-events: auto; /* 默认 */
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill; /* SVG only */
pointer-events: visibleStroke; /* SVG only */
pointer-events: visible; /* SVG only */
pointer-events: painted; /* SVG only */
pointer-events: fill; /* SVG only */
pointer-events: stroke; /* SVG only */
pointer-events: all; /* SVG only */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;


pointer-events 属性值注意事项:
上述众多属性应用于SVG,对于浏览器来说,只有auto和none两值可用
auto:是缺省值,代表元素保持原样式,不发生任何变化
none:代表元素的鼠标事件失效,类似于为元素设置一个disabled属性
—————————————————————-
pointer-events 属性应用场景
例:
地图上面一个覆盖层,我们需要点击覆盖层下面对象,那么此时我们可以 pointer-events:none使当前层事件失效,当我们鼠标点击事件,那么事件将冒泡到父级元素,被父级元素侦听,执行父级元素。


pointer-events 属性举例


 <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8"> 
  <meta name="Author" content="http://www.maomao365.com">
  <title>猫猫教程(www.maomao365.com)
  ----css pointer-events属性简介
  </title>
 <style>
  /*
  使用css禁止用户点击事件
  */
  .t{
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
  }
 </style>

<script>

function show(){
	 alert("a");
}

</script>

 </head>
 <body>
    例:<br />
	 使下面的元素变为disabled
     <br />
	 <a class='t' href="http://www.maomao365.com" 
	    target="_blank" title="猫猫小屋"
	 >猫猫小屋</a>
   
    <input type="button" class="t" value="show" 
	onclick="show();" />

	<select id="d" class="t">
      <option>a</option>
	  <option>b</option>
	  <option>c</option>
	  <option>d</option>
	</select>

   <input type="text" 
    class="t" 
	style="width:100px;"
    	/>

  </body>
</html>

 
css pointer-events属性简介说明

css pointer-events属性简介说明

如何使用css代码禁用(按钮/超链接)呢?


摘要:
下文讲述一种css技巧,禁止用户鼠标点击操作的方法分享,如下所示:

我们都知道,使用的preventDefault方法可以取消用户默认事件或在事件中return false禁用用户事件,那么下文讲述我们使用css方法如何禁用用户默认点击事件呢

实现思路:
使用css pointer-events属性,并将其设置为none,即可禁止用户点击事件
———————注意事项————————-
此属性放入chrome测试可生效—IE11此属性无效


  <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8"> 
  <meta name="Author" content="http://www.maomao365.com">
  <title>猫猫教程(www.maomao365.com)
  ----css 禁用点击事件
  </title>
 <style>
  /*
  使用css禁止用户点击事件
  */
  a{
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
  }
 </style>
 </head>
 <body>
    例:<br />
	 使用css禁用下面的超链接产生点击事件
     <br />
	 <a href="http://www.maomao365.com" 
	    target="_blank" title="猫猫小屋"
	 >猫猫小屋</a>

	 <a href="http://www.maomao365.com" 
	    target="_blank" title="猫猫小屋2"
	 >猫猫教程2</a>
 </body>
</html>



相关阅读:
javascript 中e.preventDefault()方法的功能说明
javascript中stopPropagation()方法功能简介说明