Question

我正在进行一些验证，我需要关闭内联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添加它？

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

Answer 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>

Answer 2

这是一个Javscript解决方案：

迭代元素
检查预定义对象中是否存在元素id
如果存在，请从对象中删除密钥并将其重新分配给onclick事件
如果它不存在，请删除事件处理程序并将其保存在以id元素为键的对象上

演示小提琴：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>

关闭内联onClick事件

2 个答案: