整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

jQuery 移除或禁用html元素的点击事件方法汇总

、CSS方法

.disabled { pointer-events: none; }

二、jQuery方法

方法一

$(this).click(function (event) {
    event.preventDefault();
}

方法二

$('a').live('click', function(event) {
    alert("抱歉,已停用!");
    event.preventDefault();
});

注:此方法中的live亦可以为on, bind等方法

方法三

$('.disableCss').removeAttr('onclick'); //去掉标签中的onclick事件

通过removeAttr方法来控制html标签的属性已达到启用或禁用事件。另, 使用这种方式也可以控制其他事件或其他效果。

方法四

$('#button').attr('disabled',"true");//添加disabled属性
$('#button').removeAttr("disabled"); //移除disabled属性

注:和方法三是一样的, 不过disabled属性一般用在类型为button或submit的input上

<div class="subcategories">这里有点击事件</div>
<div class="subcategories">这里有点击事件</div>
<div class="subcategories">这里有点击事件</div>
<script type="text/javascript">
//阻止点击事件
$(function() {
    $(".subcategories").click(function(event) {
        event.stopPropagation();
    });
});
</script>

么是JS事件冒泡?

在一个对象上触发某类事件(比如单击onclick事件), 如果此对象定义了此事件的处理程序, 那么此事件就会调用这个处理程序, 如果没有定义此事件处理程序或者事件返回true,

那么这个事件会向这个对象的父级对象传播, 从里到外, 直至它被处理(父级对象所有同类事件都将被激活), 或者它到达了对象层次的最顶层, 即document对象(有些浏览器是window)。

如何来阻止Jquery事件冒泡?

通过一个小例子来解释

<!DOCTYPE html>
<html>
<head runat="server">
<title>Porschev---Jquery 事件冒泡</title>
<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
</head>
<body>
  <form id="form1" runat="server">
    <div id="divOne" onclick="alert('我是最外层');">
      <div id="divTwo" onclick="alert('我是中间层!')">
        <a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com"onclick="alert('我是最里层!')">点击我</a>
      </div>
    </div>
  </form>
</body>
</html>

比如上面这个页面,

分为三层:divOne是第外层,divTwo中间层,hr_three是最里层;

他们都有各自的click事件,最里层a标签还有href属性。

运行页面,点击“点击我”,会依次弹出:我是最里层---->我是中间层---->我是最外层

---->然后再链接到百度.


这就是事件冒泡, 本来我只点击ID为hr_three的标签, 但是确执行了三个alert操作。

事件冒泡过程(以标签ID表示):hr_three----> divTwo----> divOne 。从最里层冒泡到最外层。

如何来阻止?

1.event.stopPropagation();

<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
event.stopPropagation();
});
});
<script>

再点击"点击我", 会弹出:我是最里层, 然后链接到百度


2.return false;

如果头部加入的是以下代码

<script type="text/javascript">
$(function() {
  $("#hr_three").click(function(event) {
    return false;
  });
});
<script>

再点击"点击我", 会弹出:我是最里层, 但不会执行链接到百度页面


由此可以看出:

1.event.stopPropagation();

事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转)


2.return false;

事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转)


还有一种有冒泡有关的:

3.event.preventDefault();

如果把它放在头部A标签的click事件中, 点击"点击我"。

会发现它依次弹出:我是最里层---->我是中间层---->我是最外层, 但最后却没有跳转到百度

它的作用是:事件处理过程中, 不阻击事件冒泡, 但阻击默认行为(它只执行所有弹框, 却没有执行超链接跳转)

览网页时,当从A页面点击跳转到B页面后,一般情况下,可以点击浏览器上的“后退”按钮返回A页面。

如果进入B页面后,B页面想让访问者留下,禁止返回,是否可以实现呢?

这简直是要控制浏览器的行为,虽然有些邪恶,但确实可以实现,使用特殊的JavaScript代码就可实现。

方法如下:

实现原理:

监听浏览器的popstate事件,该事件会在用户点击浏览器的回退按钮时被触发。

然后,使用History.pushState()方法向当前浏览器会话的历史堆栈中添加一个陷阱状态,该状态会使“回退”操作无效。

JS源码:

<script>

//浏览器返回键事件

pushHistory();

window.addEventListener("popstate", function(e) {

//判断移动端

var userAgentInfo = navigator.userAgent;

var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");

var equipmentType = false;

for (var v = 0; v < Agents.length; v++) {

if (userAgentInfo.indexOf(Agents[v]) != -1) {

equipmentType = true;

break;

}

}

if (equipmentType) {

$("#mask-back").show();

$("#mask-back .back-close").on("click", function() {

$("#mask-back").hide();

})

}

pushHistory(); //注,此处调用,可以让用户一直停留着这个页面

}, false);

function pushHistory() {

var stateeee = {

title: "title",

url: "#"

};

window.history.pushState(stateeee, "title", "#");

}

</script>

测试方法:

建立两个文件:a.html、b.html。

a文件内容简单写一句代码:

<a href="b.html">goto b.html</a>。

b文件内容写入上面的源码。

打开a页面,点击链接进入b页面,这时再点击浏览器上的“后退”按钮,会发现:操作无效,无法后退。

提升强度:

这个黑暗的技巧,虽然使用了不常见的技术方法,但查看页面源码很容易发现其实现原理。

为了保护代码、防止代码被分析,可以对上面的JavaScript代码加密,加密使用JShaman。

进入JShaman官网,贴入代码:

在配置中,勾选“字符串加密”:

然后生成混淆加密的JavaScript代码:

复制粘贴回b文件:

这时,代码成为加密状态,虽然不影响运行,是万万不可能了。