我有問題。這是非常簡化的代碼：
<!DOCTYPE html>
<html>
<head>
<script>
function ended(e) {
alert("Ended");
}
function paused(e) {
alert("Paused");
}
function played(e) {
alert("Played");
}
</script>
</head>
<body>
<div>
<video src="videoFile.mp4" controls onended="ended(event)" onpause="paused()" onplay="played(event)" >
</video>
</div>
</body>
</html>
每當我暫停、播放或結束視頻時，都會收到錯誤訊息：
Uncaught TypeError: played is not a function
at HTMLVideoElement.onplay
或相同但用paused或ended代替played，onpause和onended代替onplay。
我已經解決了，所以我把答案放在下面，給遇到類似問題的人。
uj5u.com熱心網友回復：
這是不使用onxyz-attribute-style 事件處理程式的眾多原因之一。它們不僅可以呼叫全域函式（這不是最佳實踐），而且它們在復雜的范圍環境中運行，其中不僅包括當前元素的屬性（您遇到的問題），而且在某些情況下還包括來自其他元素的屬性（如formaninput位于）。（更多內容見下文。）
相反，使用現代事件處理（盡可能使用模塊[所有現代瀏覽器都支持它們]）。
例如：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<video src="videoFile.mp4" controls></video>
</div>
<script type="module">
function ended(e) {
console.log("Ended");
}
function paused(e) {
console.log("Paused");
}
function played(e) {
console.log("Played");
}
const videoElement = document.querySelector(`video[src="videoFile.mp4"]`);
videoElement.addEventListener("ended", ended);
videoElement.addEventListener("pause", paused);
videoElement.addEventListener("play", played);
</script>
</body>
</html>
關于“復雜的范圍環境”：onxyz-attribute-style 事件處理程式中的代碼在一個有效創建的范圍內運行（例如）：
with (document) {
with (theTargetVideoElement) {
// ...your code here...
}
}
（沒錯，可怕的（和已棄用的）with宣告。）
對于 a 中的元素form，情況更糟：
with (document) {
with (theForm) {
with (theTargetElementInTheForm) {
// ...your code here...
}
}
}
這是一個例子：
顯示代碼片段
<form method="POST">
<input type="button" onclick="
console.log(documentElement.tagName); // 'HTML'
console.log(method); // 'post'
console.log(type); // 'button'
" value="Click Me">
</form>documentElement來自documentmethod來自form元素type來自input元素
直接說不??
uj5u.com熱心網友回復：
事實證明，所述HTMLMediaElement，該<video>元件是包含一些布爾屬性：ended，paused和played。
事實證明，當瀏覽器（Chrome，也可能是其他瀏覽器）呼叫該事件時，它會獲取這些屬性的值（即true或false），而不是使用我已經定義的函式。然后它嘗試呼叫true(event)or false(event)，并且由于true和false不是函式，它給出的錯誤是played is not a function。
所以答案是，確保您用于事件的函式名稱與觸發事件的相關 HTMLElement 中的屬性不匹配，然后您就不應該有任何問題。（我沒有檢查過，但其他 HTMLElements 似乎可能會發生這種情況）
在我來說，我把它們改成doMyEnded，doMyPaused并doMyPlayed和一切都很好。
注意：我強烈建議任何想了解更多資訊的人閱讀 TJ Crowder 的答案
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/358036.html
標籤：javascript html 功能 事件 类型错误
上一篇：C 遞回函式
下一篇：如何用for回圈重復一個函式