Question

我想为已经渲染的按钮代码添加更多功能。唯一的方法是使用Javascript，因为它之前是从服务器呈现的，我只能访问JSP。

这是我现在拥有的，但它不起作用，它只是显示相同的消息两次。如果我单击按钮，则不会显示警告“hello”。

<script type="text/javascript">
function addEventBefore(element, type, fn) {
  var old = element['on' + type] || function() {};
  element['on' + type] = function () { fn(); old(); };
}

function sayHello(){
  alert('hello');
}

var arr = document.getElementsByTagName("button");
for (i = 0; i < arr.length; i++) {
  if (arr[i].getAttribute("name") == "Complete"){
    var theclick = arr[i].getAttribute("onClick");
    alert(theclick);
    addEventBefore(arr[i], 'Click', sayHello);
    var theclick2 = arr[i].getAttribute("onClick");
    alert(theclick2);
  }
}
</script>

这是页面的呈现源代码：

<td valign='top' align='right' >
 <button  name="Complete"  title="The complete Button"
 onClick="document.forms.TaskInfoPage.action='http://prodserver:8080/Approval.jsp?windowId=dd4c0&eventTarget=stepApproval&eventName=Complete'
 document.forms.InfoPage.submit();return false;">Complete</button>
</td>

所以，我想在onClick上执行操作之前放置sayHello（）。

Answer 1

它是onclick而不是onClick，所以你需要这个：

addEventBefore(arr[i], 'click', sayHello);
                     // ^ lower case here

属性本身仍然不会显示任何不同的内容，但事件本身将起作用you can test it here。另外，要为您的事件处理程序维护this，我建议您至少.call()这些函数，如下所示：

function addEventBefore(element, type, fn) {
  var old = element['on' + type] || function() {};
  element['on' + type] = function () { fn.call(this); old.call(this); };
}

通过Javascript修改onClick属性

1 个答案: