关闭内联onClick事件

时间:2015-10-28 07:40:40

标签: javascript jquery

我正在进行一些验证,我需要关闭内联onClick事件,然后将其打开。

Jquery on off方法不适用于内联onClick事件。下面的行删除了onClick事件。在此之前,我将事件保存到数组中

$('.elements a').prop('onclick',null).on('click');

将事件保存到数组

    var arr = [];
    var i = 0;
     $('.elements a').each(function(){
        arr[i++] = $(this).attr('onclick');
       });

如何以相同的顺序将这些事件重新分配给每个元素。希望可以使用addEventListener添加它?

或者还有其他方法可以达到同样的效果吗?

2 个答案:

答案 0 :(得分:1)

由于必须使用内联事件处理程序,因此可以将已删除的属性存储在数组中,然后重新将它们重置:

var events = $('.elements a').map(function() {
    var onclick = $(this).attr('onclick');
    $(this).removeAttr('onclick');
    return onclick;
}).get();


// ... Apply events later
$('.reset').click(function() {
    $('.elements a').each(function(i) {
	    $(this).attr('onclick', events[i])
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements">
    <a href="#" onclick="console.log(1)">Link 1</a>
    <a href="#" onclick="console.log(2)">Link 2</a>
    <a href="#" onclick="console.log(3)">Link 3</a>
</div>

<button class="reset">Reset events</button>

答案 1 :(得分:0)

这是一个Javscript解决方案:

  1. 迭代元素
  2. 检查预定义对象中是否存在元素id
  3. 如果存在,请从对象中删除密钥并将其重新分配给onclick事件
  4. 如果它不存在,请删除事件处理程序并将其保存在以id元素为键的对象上
  5. 演示小提琴:http://jsfiddle.net/abhitalks/op6nt25f/

    演示代码段

    var btn = document.getElementById('btn'), 
        anchors = document.querySelectorAll('.elements a'), 
        elems = {};
    btn.addEventListener('click', toggleClick);
    
    function toggleClick() {
        [].forEach.call(anchors, function(anchor) {
            if (anchor.id in elems) {
                anchor.setAttribute('onclick', elems[anchor.id]);
                delete elems[anchor.id]; 
                btn.innerText = 'Disable click event';
            } else {
                elems[anchor.id] = anchor.getAttribute('onclick');
                anchor.setAttribute('onclick', '');  
                btn.innerText = 'Enable click event';
            }
        });
    }
    
    function dojob(elem) { snippet.log(elem.innerText); }
    <script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
    <ul class="elements">
        <li><a id="a1" href="#" onclick="dojob(this)">One</a></li>
        <li><a id="a2" href="#" onclick="dojob(this)">Two</a></li>
        <li><a id="a3" href="#" onclick="dojob(this)">Three</a></li>
        <li><a id="a4" href="#" onclick="dojob(this)">Four</a></li>
    </ul>
    <button id="btn">Disable click event</button>