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

Question

我在某个区域上添加了一个 font -awesome 按钮 - 以便删除该区域；它看起来像这样:

这是我添加到 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(){};

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