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>
|