通过拖动文本区域来拖动面板 firefox sdk
drag panel by dragging textarea firefox sdk
所以我创建了一个带有 javascript 的面板用于 firefox 扩展,如下所述:
var win = Services.wm.getMostRecentWindow('navigator:browser');
var panel = win.document.createElement('panel');
var screen = Services.appShell.hiddenDOMWindow.screen;
var props = {
noautohide: true,
noautofocus: false,
backdrag: true,
level: 'top',
style: 'padding:10px; margin:0; width:530px; height:90px; background-color:rgba(0,0,0,0.3); border:none;'
}
for (var p in props) {
panel.setAttribute(p, props[p]);
}
var textarea = win.document.createElement('textarea')
textarea.disabled = true;
textarea.readonly = true;
textarea.overflow = 'hidden';
textarea.width = '525px';
textarea.height = '85px';
textarea.style.textAlign = 'center';
textarea.style.fontFamily = '"New Century Schoolbook"';
textarea.style.color = 'white';
textarea.style.fontSize = '21px';
textarea.style.fontWeight = 'bold';
textarea.style.fontStretch = 'semi-condensed';
textarea.style.backgroundColor = 'rgba(0,0,0,0)';
panel.appendChild(textarea);
textarea.innerHTML = 'text';
win.document.querySelector('#mainPopupSet').appendChild(panel);
panel.addEventListener('dblclick', function () {
panel.parentNode.removeChild(panel)
}, false);
panel.openPopup(null, 'overlap', screen.availLeft+screen.width/2, screen.availTop/2);
所以它只是一个面板,里面有一个文本区域。我的问题如下:我可以通过选择边框并四处移动来拖动面板,但是由于文本区域,我无法通过拖动文本区域来拖动面板。
我想要的是关闭拖动事件并将其传递给面板的文本区域。我如何让用户拖动面板而不是文本区域?
我在指针事件中找到了答案css 属性:
textarea.style.pointerEvents = 'none';
更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
所以我创建了一个带有 javascript 的面板用于 firefox 扩展,如下所述:
var win = Services.wm.getMostRecentWindow('navigator:browser');
var panel = win.document.createElement('panel');
var screen = Services.appShell.hiddenDOMWindow.screen;
var props = {
noautohide: true,
noautofocus: false,
backdrag: true,
level: 'top',
style: 'padding:10px; margin:0; width:530px; height:90px; background-color:rgba(0,0,0,0.3); border:none;'
}
for (var p in props) {
panel.setAttribute(p, props[p]);
}
var textarea = win.document.createElement('textarea')
textarea.disabled = true;
textarea.readonly = true;
textarea.overflow = 'hidden';
textarea.width = '525px';
textarea.height = '85px';
textarea.style.textAlign = 'center';
textarea.style.fontFamily = '"New Century Schoolbook"';
textarea.style.color = 'white';
textarea.style.fontSize = '21px';
textarea.style.fontWeight = 'bold';
textarea.style.fontStretch = 'semi-condensed';
textarea.style.backgroundColor = 'rgba(0,0,0,0)';
panel.appendChild(textarea);
textarea.innerHTML = 'text';
win.document.querySelector('#mainPopupSet').appendChild(panel);
panel.addEventListener('dblclick', function () {
panel.parentNode.removeChild(panel)
}, false);
panel.openPopup(null, 'overlap', screen.availLeft+screen.width/2, screen.availTop/2);
所以它只是一个面板,里面有一个文本区域。我的问题如下:我可以通过选择边框并四处移动来拖动面板,但是由于文本区域,我无法通过拖动文本区域来拖动面板。
我想要的是关闭拖动事件并将其传递给面板的文本区域。我如何让用户拖动面板而不是文本区域?
我在指针事件中找到了答案css 属性:
textarea.style.pointerEvents = 'none';
更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events