我能想到的一种不需要更改您正在使用的 HTML,但确实涉及更改您收到的 DOM 的方法是:
function x() {
$(this).prop('disabled', true);
}
// selecting, and iterating over, all <input> elements with
// an in-line 'onclick' event-handler attribute:
$('input[onclick]').each(function() {
// retrieving the contents of the 'onclick' attribute:
var onClickFunction = $(this).attr('onclick');
// setting the onClickFunction variable to the
// substring of the existing value from the first
// character to the index of the first '('
// character, so from 'x()' to 'x' or from
// 'function1();function2()' to 'function1'
// (this could be worked-around, but this is
// a simple proof-of-concept):
onClickFunction = onClickFunction.substring(0, onClickFunction.indexOf('('));
// if there is a function, or a variable, held as a
// property of the window object, then:
if (window[onClickFunction]) {
// we remove the 'onclick' attribute, and use the
// on() method to add the event-handler back:
$(this).removeAttr('onclick').on('click', window[onClickFunction]);
}
});
function x() {
$(this).prop('disabled', true);
}
$('input[onclick]').each(function() {
var onClickFunction = $(this).attr('onclick');
onClickFunction = onClickFunction.substring(0, onClickFunction.indexOf('('));
if (window[onClickFunction]) {
$(this).removeAttr('onclick').on('click', window[onClickFunction]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='button' onclick='x()' value='Disable me' />
<input type='button' onclick='x()' value='Disable me' />
值得注意的是,虽然上述情况在 jQuery 中是完全可能的,但在纯 JavaScript 中同样可能:
function x() {
this.disabled = true;
}
// excuse the absurdly-long variable-names; they were meant to be
// descriptive.
// here we retrieve all <input> elements with an onclick attribute:
var inputsWithOnClick = document.querySelectorAll('input[onclick]'),
// here we use Array.from() to turn that collection into an Array:
arrayOfOnClickInputs = Array.from(inputsWithOnClick);
// iterating over the Array, 'input' (the first argument)
// refers to the current element of the array over which
// we're iterating:
arrayOfOnClickInputs.forEach(function(input) {
// retrieving the contents of the 'onclick' attribute:
var onClickFunction = input.getAttribute('onclick');
// updating that variable to contain the substring of
// of the attribute-value, from the first character to
// the first occurrence of of the '(' character:
onClickFunction = onClickFunction.substring(0, onClickFunction.indexOf('('));
// as above:
if (window[onClickFunction]) {
// removing the 'onclick' attribute:
input.removeAttribute('onclick');
// using EventTarget.addEventListener to bind the
// function to the click-event on the <input> element:
input.addEventListener('click', window[onClickFunction]);
}
});
function x() {
this.disabled = true;
}
var inputsWithOnClick = document.querySelectorAll('input[onclick]'),
arrayOfOnClickInputs = Array.from(inputsWithOnClick);
arrayOfOnClickInputs.forEach(function(input) {
var onClickFunction = input.getAttribute('onclick');
onClickFunction = onClickFunction.substring(0, onClickFunction.indexOf('('));
if (window[onClickFunction]) {
input.removeAttribute('onclick');
input.addEventListener('click', window[onClickFunction]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='button' onclick='x()' value='Disable me' />
<input type='button' onclick='x()' value='Disable me' />
这些方法的原因很简单,在这种情况下,属性是已知的 (onclick),并且您想在 jQuery 为您管理的函数中使用 this,而 addEventListener() 也自动执行。
老实说,我想不出另一种方法来将this 提供到您需要的位置。
参考资料: