使用区域本身上的按钮删除区域

Question

我在一个区域上添加了一个很棒的字体按钮 - 以删除该区域；它看起来像这样：

这是我在 wavesurfer.regions.js 中添加到渲染函数的代码：

var deleteButton = regionEl.appendChild(document.createElement('i'));
deleteButton.className = 'fa fa-trash';
deleteButton.onclick = "wavesurfer.clearRegions();";
deleteButton.title = "Delete region";

  var css = {
	display: 'block',
	float: 'right',
	padding: '3px',
	position: 'relative',
	zIndex: 10,
	cursor: 'pointer',
	cursor: 'hand',
	color: '#129fdd'
  };
  this.style(deleteButton, css);

当我查看呈现的 HTML 时，它不包含 onclick 事件；显然，当单击它时，它什么也不做。 如何让 onclick 事件首先显示在呈现的 HTML 中？ 其次，执行 clearRegions 方法的正确方法是什么？

这里是呈现的 HTML 的片段：

<region class="wavesurfer-region" title="0:53-1:18" data-id="wavesurfer_cvb9j0n784o" style="position: absolute; z-index: 2; height: 100%; top: 0px; left: 543px; width: 255px; background-color: rgba(0, 0, 0, 0.0980392); cursor: move;"><i class="fa fa-trash" title="Delete region" style="display: block; float: right; padding: 3px; position: relative; z-index: 10; cursor: pointer; color: rgb(18, 159, 221);"></i><handle class="wavesurfer-handle wavesurfer-handle-start" style="cursor: col-resize; position: absolute; left: 0px; top: 0px; width: 1%; max-width: 4px; height: 100%;"></handle><handle class="wavesurfer-handle wavesurfer-handle-end" style="cursor: col-resize; position: absolute; left: 100%; top: 0px; width: 1%; max-width: 4px; height: 100%;"></handle></region>

Tkx

Answer 1

deleteButton.onclick = function(){};

你的语法是错误的哥们。你不需要加上引号。 如果还有其他问题，请分享您的完整代码，这将有助于解决问题。