首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端如何提高用户体验:增强可点击区域的大小

不过,我也可以选择文本和悬停时,有一个文本光标!如果使用了正确的元素,就不会发生这种情况。 ?...链接 之前在做导航的时候,犯了一个错误,应该是给 a 标签添加 padding 而不是 li: href="#">Home...请注意,默认情况下,padding 需要块元素才有效,而 a 标签是行内元素,所以可以给 a 标签设置block,inline-element或 flex。...复选框和单选按钮 当存在复选框或单选按钮元素时,我希望可以单击它或关联的标签来激活/禁用它。 ? 从用户体验的角度来看,这是难以访问和糟糕的。...这样,问题得以解决,整个复选框或单选按钮都是可单击的,如下图所 ? 侧边栏 对于带有类别的页面,有时我会注意到列表链接没有扩展到其父页面的整个宽度。 也就是说,可点击区域仅在文本上,如下图所示: ?

4.8K20

WEB入门之十四 jQuery事件

jQuery中的ready()事件则可以很好的处理这个问题,每次给ready()事件绑定函数都会进行追加,而不是覆盖,例如下面的代码。...当按下鼠标左键时记录鼠标位置作为起始位置;当鼠标移动时一直记录鼠标的当前位置;当松开鼠标左键时记录鼠标位置作为结束位置。...){$(".content").show();},function(){$(".content").hide();})) 当页面装载完毕时,会给id是head的div元素设置hover...div>div> 该示例与5.12差不多,只是由hover事件换成了toggle事件,当鼠标单击绿色的标题时,下面的内容就会显示出来;当鼠标再次单击绿色的标题时,下面的内容就会隐藏起来...假设给所有的文本框通过bind绑定了鼠标单击事件,然后再动态创建一个文本框,此时绑定的鼠标单击事件对这个新创建的文本框无效;但是如果使用live进行绑定,那么新创建的文本框也会绑定鼠标单击事件。

8110
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    WEB入门之十四 jQuery事件

    jQuery中的ready()事件则可以很好的处理这个问题,每次给ready()事件绑定函数都会进行追加,而不是覆盖,例如下面的代码。 ​...} $(document).ready( function() { test1(); test2(); } ) 上述代码在ready()事件中绑定了两个函数,这两个函数都正常执行,而不是第二个函数覆盖第一个函数...当按下鼠标左键时记录鼠标位置作为起始位置;当鼠标移动时一直记录鼠标的当前位置;当松开鼠标左键时记录鼠标位置作为结束位置。...div> div> 该示例与5.12差不多,只是由hover事件换成了toggle事件,当鼠标单击绿色的标题时,下面的内容就会显示出来;当鼠标再次单击绿色的标题时...假设给所有的文本框通过bind绑定了鼠标单击事件,然后再动态创建一个文本框,此时绑定的鼠标单击事件对这个新创建的文本框无效;但是如果使用live进行绑定,那么新创建的文本框也会绑定鼠标单击事件。

    12910

    WEB入门之十六 操作DOM节点

    div>"); 网页原本只有一个包含超链接的div,我们通过append方法向该div内的尾部插入了一个新的div 网页上原本存在的是边框为实线的div,而边框是虚线的是新插入的div...btn").click(function(){$("#s2").append($("select option:selected").clone());}) 上述代码包含两个下拉列表框,当单击按钮时通过...添加节点时,需要先单击选中某个一级或二级节点,然后在文本框中填写新添加的节点名,单击【添加】按钮把节点名作为新节点添加到选中的节点下面。删除节点只实现删除三级节点即可。...="three")alert("你单击的不是三级节点!")...当单击【修改】按钮时,单元格中的文本信息替换为文本框;单击【确定】按钮时,文本框中的数据显示到单元格中。

    7310

    WEB入门之十六 操作DOM节点

    div>"); 网页原本只有一个包含超链接的div,我们通过append方法向该div内的尾部插入了一个新的div 网页上原本存在的是边框为实线的div,而边框是虚线的是新插入的...click( function(){ $("#s2").append($("select option:selected").clone()); } ) 上述代码包含两个下拉列表框,当单击按钮时通过...添加节点时,需要先单击选中某个一级或二级节点,然后在文本框中填写新添加的节点名,单击【添加】按钮把节点名作为新节点添加到选中的节点下面。删除节点只实现删除三级节点即可。...="three") alert("你单击的不是三级节点!")...当单击【修改】按钮时,单元格中的文本信息替换为文本框;单击【确定】按钮时,文本框中的数据显示到单元格中。

    9310

    Jump Start Bootstrap 第3章

    链接的列表 当你想用列表显示链接的时候,列表的子元素应该用,而不是用,同样列表的元素应该是div>而不是 徽章组件 我们也能在每个列表项旁边使用徽章组件来显示数字(例如那些用来指示等待通知的文件...,而data-target表明在单击时哪个部分要切换。...当单击按钮时,该部分将被切换。按钮中的span元素用来显示图标【注:图标中的横线】。 我们还定义了一个具有类”navbar-brand”的元素,该元素拥有我们网站的名称(SitePoint)。...徽章主要用于显示诸如未读项、通知等数字,而不是文本。 徽章是自崩溃的组件,即当标签未包含内容时,徽章在页面上是不可见的。...如果用户在输入字段中输入无效值时,想要显示一些自定义文本,请使用带有类帮助块的元素。当输入无效值时,帮助块将出现在对应的输入字段之下。

    13.9K20

    杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

    事件冒泡可能会引起预料之外的效果,上例中,本来只想触发元素 的click事件,然而 元素和元素的click事件也同时被触 发了.因此有必要对事件的作用范围进行限制.当单击元素时,只 触发元素的click...事件,而不触发 和元素上的 click事件.当单击 元素时,只触发 元素上的click事件, 而不触发元素上的click事件....//event:事件对象 $(“element”).bind(“click”,function(event){ //coding… }) 这样,当单击”element”时,事件对象就被创建了,这个事件对象只有事件处理函数才能访问到...; event.stopPropagation();//停止冒泡事件 }) 当单击span元素时,只会触发span元素上的click事件,而不会触发 div元素和body元素的click事件....•由于同源策略,一般来说位于 server.example.com 的网页无法与不是 server.example.com 的服务器沟通,而 HTML 的 元素是一个例外。

    8.3K20

    Python爬虫基础:常用HTML标签和Javascript入门

    属性来指定)和在页面上显示的文本,用法为: href="http://www.baidu.com">点这里 (4)img标签 在HTML代码中,img标签用来显示一个图像,并使用src属性指定图像文件地址...例如,下面的代码保存为index.html并使用浏览器打开,会发现页面上显示的是“动态内容”而不是“静态内容”。...但有些JavaScript代码需要在特定的时机才可以运行,例如本节第一段代码,只有单击页面的按钮之后才会执行okClick属性指定的JavaScript代码,这种机制叫做事件驱动。...得益于事件驱动机制,我们可以指定某段代码在什么情况下才会运行,例如页面加载时(onLoad事件)、鼠标单击时(onClick事件)、键盘按键时(onkeypress事件)等等。...当网页中包含标签时,会自动建立image对象,网页中的图像可以通过document对象的images数组来访问,或者使用图像对象的名称进行访问。

    1.8K10

    JS事件篇

    区分概念: 节点包括文本节点,而元素不包括文本节点 firstChild获取当前元素第一个子节点 VS firstElementChild获取当前元素第一个子元素 抽离出按钮点击函数的小案例 parentNode...元素.scrollLeft和scrollTop获取水平和垂直滚动条滚动滚动距离 当满足scrollHeight - scrollTop == clientHeight时,表明垂直滚动条滚动到底了 阅读知情同意书的小案例...,不包括文本节点 ---- 区分概念: 节点包括文本节点,而元素不包括文本节点 ---- firstChild获取当前元素第一个子节点 VS firstElementChild获取当前元素第一个子元素...” οnclick=” return false; "> Click Me 当点击a标签时,JavaScript代码返回值为false,故此链接默认行为未被触发。...,那么就让鼠标呆在点击出,而不是跑到左上角,计算出div在每次鼠标点击时需要的偏移量即可 ---- 鼠标滚轮事件----onmousewheel----火狐不支持,由DOMMouseScroll

    12.6K10

    分享 11 个非常有用的 HTML One-Liners 代码

    2、下载 href="/images/myw3schoolsimage.jpg" download> 当您希望用户下载链接而不是导航到文件时,下载属性非常有用。...当单词太长并且浏览器很可能在不正确的位置打破它时,这很有用。...当您处理不像英语那样从左到右的语言时,这非常有用。 使用此属性的一个潜在地方是社交媒体聊天应用程序。...="myFunction()" contextmenu="mymenu"> 您可以监听事件,例如当他们使用右键单击或尝试粘贴内容并使用 oncontextmenu 和 onpaste 属性处理这些事件时... 当设置为 true 时,拼写检查属性告诉浏览器必须检查用户在该元素中输入的语法和拼写错误。 这是一个方便的属性,可帮助用户编写正确无误的内容。

    71420

    jquery mobile 移动web(5)

    href="#"> List 2       href="#"> List 3        div> 可分割按钮列表...6.ajaxEnabled       类型:布尔值,默认值是true       用法:$.mobile.ajaxEnabled = false       描述:设置当单击连接或提交表单或按钮时...slide       用法:$.mobile.defaultPageTransition = “fade”       描述:该选项参数主要设置页面切换默认的效果,如果设置为none ,页面切换时就不会有效果...11.minScrollBack       类型:字符串,默认值是150       用法:$.mobile.minScrollBack = “200”       描述:当滚动超出所设置的高度时才会触发滚动位置记忆功能...页面请求失败时显示的提示的文本内容     14.gradeA       类型:布尔值,默认值是$.support.mediaquery 的值       用法:$.mobile.gradeA

    1.4K50

    图像 alt 属性中存储的 XSS 漏洞以窃取 cookie

    例如,我可能会在网页的左上角看到完整的有效负载作为常规文本输出(例如页面标题),但随后部分有效负载将在同一页面的另一部分中被剥离。除了,当我检查显示这些有效负载的上下文时,它们是相同的。...所以你可能在网页上有这样的东西: 正确文本而不是创建 HTML 元素的位置...为了查看是否发生了任何事情,我右键单击了其中一个无效的有效负载并检查了该元素。 我的 DevTools 一打开,我的眼睛就看到了一个看起来很奇怪的alt属性。...我的有效负载被添加到alt页面上图像的属性中,直到我查看源代码才可见。除了这一次,我的有效负载正在关闭alt图像的属性并创建一个单独的onload属性。 至此,狩猎开始。...例如: Payload: ">div>href=javaSCRIPT:alert(/XSS/)>XSS Result: href="javaSCRIPT&colon

    1.3K00

    Vue 各类数据绑定

    因为这已不是遁隐修行,而是职场卖命,唯有先快速解决需求,方能攫取更为充盈的时间去深究技术机理,以使臻于更强,更强而优于快,如此优良循环得以形成。..."(index, item) in items",再比如: href="#" @click="onXXClick(param)"> 之类的; 当涉及到解析class,style时候,本来这类属性是...当然,大多情形之下,并不是很肯定将各种 class, style 的操纵,放置于Template中,即便使用jade等一些模版语言辅助,也会使得整个 Dom 结构看起来,没那么清晰明朗,能方便切类予以实现的...,最好用这种方式,毕竟简洁才美。...-- 在 "change" 而不是 "input" 事件中更新 --> 关于 Vue,文档写的再清楚没有了,所以也没有额外啰嗦的必要。

    1.3K70

    编写自己的 WordPress 模板

    在整个开发过程中遵循的概念设计,可以是 PSD 或 HTML CSS。 PHP 编程的一点介绍。但是,这不是此特定帖子的必需品,但仍然推荐。...当 你打开wp-content -> 主题目录时, 你会找到默认的 WordPress 主题,例如二十五、二十四、二十三等。要从 你自己的一个开始,请使用 你喜欢的任何名称创建一个目录。...这不是必需的,因为 你可以在 中进行所有操作 index.php,但是良好的编程实践涉及模块化。对于这篇特定的帖子,我们将把整个工作分为四个部分,即。页眉、页脚、侧边栏和内容。...> 如果有任何帖子,而没有剩下的,显示它们。此循环中的任何内容都将重复,直到页面用完所有帖子。我们可以使用这个概念来显示我们的列表。这就是我的做法。...如果当前页面仅包含要循环的单个帖子,则此条件将成立。当它不是单身时,我想通过其标题链接到该帖子。所以我使用 get_permalink()来获取该特定帖子的网址。

    1.4K30

    ❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️

    单击这些类别中的任何一个时。然后可以看到该类别中的所有作品,而隐藏其余作品。结果,用户可以轻松地找到他选择的图像。 我首先在网页上创建了一个导航栏。在这里创建了五类按钮,一共使用了15张图片。...同样,当您单击另一个类别时,该类别的作品将被看到,其余的将被隐藏。我让它完全响应,以便它可以在所有设备上使用。...当你单击一个类别时,这些类别中的每一个都将与图像并排显示。例如,如果您单击具有四个图像的类别。第一行有两个图像,第二行有两个图像。...当您单击此类别时,该类别其余部分中的所有图像将被隐藏,所有四个图像将并排显示。以下代码已用于使此重定位更加生动。此处使用了 0.5 秒,这意味着更改该位置需要 0.5 秒。...animation: fadeIn 0.5s ease; } @keyframes fadeIn{ 0%{ opacity: 0; } 100%{ opacity: 1; } } 当您单击一个类别时

    6.5K20

    Jump Start Bootstrap 第4章

    属性告诉Bootstrap当点链接击时,激活链接元素上的下拉效果。...导航条仅由内部链接作为href属性的值组成。当用户开始滚动时,导航栏中的相应链接将按当前显示的部分高亮显示。 让我们先建立一个navbar,下面是代码: 当设置为“静态”时,当在模态主体外的任何地方点击时,模式对话框不会关闭。 keyboard属性用于启用或禁用键盘的escape键功能,当设置为false时,Esc键不会关闭模式对话框。...当设置为true时,模式对话框将自动显示,不需要单击任何句柄元素。 元素,可以作为一个modal handle元素,可以包含一个包含链接的属性href。...Bootstrap模式对话框有一个选项,当单击该句柄时,将该链接加载到它的modal-body元素中。这个特性在默认情况下是关闭的。

    28.4K40
    领券