概述
本 Demo 展示了如何使用工作簿的 hitTest 方法进行命中测试，识别用户点击工作簿中的具体区域。通过点击测试，可以精确获取点击位置的区域类型、坐标信息和单元格索引，为构建交互式表格应用提供支持。
实现思路
创建 Workbook 实例，并设置初始工作表名称
为工作簿宿主元素添加 click 事件监听器
计算点击位置相对于工作簿的坐标 (x, y)
调用 spread.hitTest(x, y) 获取命中测试信息
解析返回结果，识别点击区域的类型和详细信息
将结果显示在文本框中
代码解析
监听点击事件并获取相对坐标
代码通过监听工作簿宿主元素的 click 事件，计算点击位置相对于工作簿容器的坐标偏移量，然后调用 hitTest 方法获取命中信息。
解析命中测试结果
根据 hitTest 返回的不同属性，可以判断点击的区域类型。返回对象包含以下主要属性：
worksheetHitInfo：工作表区域信息
tabStripHitInfo：标签栏区域信息
horizontalScrollBarHitInfo：水平滚动条信息
verticalScrollBarHitInfo：垂直滚动条信息
footerCornerHitInfo：页脚角落信息
对于工作表区域，通过 hitTestType 判断具体子区域：0-角落、1-列标题、2-行标题、3-视口单元格。视口区域还可以获取具体的行和列索引。
运行效果
点击工作表区域（角落、行列标题、单元格），文本框显示具体区域类型和坐标
点击单元格时，会显示具体的行列索引
点击标签栏、滚动条等其他区域，显示对应的区域名称
所有点击都会显示相对于工作簿的 X、Y 坐标
API 参考
hitTest 方法
x：相对于工作簿的 X 坐标
y：相对于工作簿的 Y 坐标
返回值：IWorkbookHitTestInformation 对象，包含以下属性
x、y：点击坐标
worksheetHitInfo：工作表命中信息
tabStripHitInfo：标签栏命中信息
horizontalScrollBarHitInfo：水平滚动条命中信息
verticalScrollBarHitInfo：垂直滚动条命中信息
footerCornerHitInfo：页脚角落命中信息
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1});
//remove body margin
document.getElementById("ss").parentNode.parentNode.style.margin = "0";
initFunction(spread);
};
function initFunction(spread) {
var sheet = spread.getActiveSheet();
spread.suspendPaint();
spread.getSheet(0).name("hitTest");
sheet.setColumnWidth(0, 150);
sheet.setText(0, 0, "点击此工作簿中的任意位置。");
spread.getHost().addEventListener('click', function(e){
var y = e.pageY - this.offsetTop;
var x = e.pageX - this.offsetLeft;
var result = spread.hitTest(x, y);
var str = getHitAreaName(result);
if (result) {
document.getElementById("showEventArgs").value="(X坐标: " + result.x.toString() + "," + " Y坐标:" + result.y.toString() + ")" + " ; " + str;
}
});
spread.resumePaint();
}
function getHitAreaName(result){
if(result) {
var str = "";
var worksheetHitInfo = result.worksheetHitInfo;
var tabStripHitInfo = result.tabStripHitInfo;
if (worksheetHitInfo) {
var hitTestType = worksheetHitInfo.hitTestType;
if (hitTestType === 0) {
str = '角落';
} else if (hitTestType === 1) {
str = '列标题';
} else if (hitTestType === 2) {
str = '行标题';
} else {
var row = worksheetHitInfo.row;
var col = worksheetHitInfo.col;
str = '视口; ' + '(行: ' + row + ', 列: ' + col + ')';
}
} else if (tabStripHitInfo) {
if (tabStripHitInfo.navButton) {
str = tabStripHitInfo.navButton;
} else if (tabStripHitInfo.sheetTab) {
str = tabStripHitInfo.sheetTab.sheetName;
} else if (tabStripHitInfo.resize === true) {
str = "调整大小";
} else {
str = "空白";
}
} else if (result.horizontalScrollBarHitInfo) {
str = result.horizontalScrollBarHitInfo.element;
} else if (result.verticalScrollBarHitInfo) {
str = result.verticalScrollBarHitInfo.element;
} else if (result.footerCornerHitInfo) {
str = result.footerCornerHitInfo.element;
}
}
return str;
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div id="settingsDiv">
<br />
<label>此文本框显示工作簿中点击区域的详细信息。</label>
<br />
<textarea id="showEventArgs" cols="85" rows="3" style="max-width: 98%"></textarea>
</div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
label {
display: block;
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
