39 lines
1.4 KiB
HTML
39 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="author" content="flykhan" />
|
||
<meta name="keywords" content="c c++ 物联网" />
|
||
<title>window窗口对象</title>
|
||
</head>
|
||
<body>
|
||
<span data-url="css3.html" data-target="_self" onclick="open_page(event)"
|
||
>打开主页</span
|
||
><br />
|
||
<span data-url="css1.html" data-target="_blank" onclick="open_page(event)"
|
||
>打开样式1</span
|
||
><br />
|
||
|
||
<script>
|
||
// event 表示在 span 标签上发生的事件对象
|
||
// event 对象的核心属性：
|
||
// 1) target 发生事件的目标对象（事件源）
|
||
// 2) x,y 事件发生的坐标
|
||
// 3) type 事件类型, 如：click, dbclick, mousemove, mouseover, mouseout, mouseup, mousedown 等
|
||
// 4) preventDefault() 阻止默认事件
|
||
function open_page(event) {
|
||
console.log(event);
|
||
// 获取点击的标签元素对象
|
||
let span = event.target;
|
||
// 从点击的目标对象中获取数据集 dataset, 里面存储了所有的 data-xxx 属性及其值
|
||
let page_url = span.dataset.url;
|
||
let page_target = span.dataset.target;
|
||
|
||
// open(url, target, features, replace) 是 window 对象的方法，用于打开新的窗口
|
||
// 在页面的 script 标签中，window 对象可以省略
|
||
open(page_url, page_target); // 打开新的页面
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|